<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Masking Module Level 1</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="refining" name="csswg-work-status">
  <meta content="ED" name="w3c-status">
  <meta content="CSS Masking provides two means for partially or fully hiding portions of visual elements: masking and clipping.    Masking describes how to use another graphical element or image as a luminance or alpha mask. Typically, rendering an element via CSS or SVG can conceptually be described as if the element, including its children, are drawn into a buffer and then that buffer is composited into the element&apos;s parent. Luminance and alpha masks influence the transparency of this buffer before the compositing stage.    Clipping describes the visible region of visual elements. The region can be described by using certain SVG graphics elements or basic shapes. Anything outside of this region is not rendered." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
  <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-ED" rel="stylesheet" type="text/css">
  <link href="https://www.w3.org/TR/css-masking-1/" rel="canonical">
<script defer src="https://test.csswg.org/harness/annotate.js#!css-masking-1_dev/css-masking-1" type="text/javascript"></script>
<style type="text/css">
a[data-link-type=element]::before,span[data-link-type=element]::before {
  content: '<';
}
a[data-link-type=element]::after,span[data-link-type=element]::after {
  content: '>';
}
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Masking Module Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://drafts.fxtf.org/css-masking-1/">https://drafts.fxtf.org/css-masking-1/</a>
     <dt>Latest published version:
     <dd><a href="https://www.w3.org/TR/css-masking-1/">https://www.w3.org/TR/css-masking-1/</a>
     <dt>Previous Versions:
     <dd><a href="https://www.w3.org/TR/2014/CR-css-masking-1-20140826/" rel="prev">https://www.w3.org/TR/2014/CR-css-masking-1-20140826/</a>
     <dt>Test Suite:
     <dd><a href="http://test.csswg.org/suites/css-masking/nightly-unstable/">http://test.csswg.org/suites/css-masking/nightly-unstable/</a>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard" data-editor-id="51803"><a class="p-name fn u-email email" href="mailto:dschulze@adobe.com">Dirk Schulze</a> (<span class="p-org org">Adobe Inc.</span>)
     <dd class="editor p-author h-card vcard" data-editor-id="43194"><a class="p-name fn u-email email" href="mailto:bbirtles@mozilla.com">Brian Birtles</a> (<span class="p-org org">Mozilla Japan</span>)
     <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="http://www.xanthir.com/contact/">Tab Atkins Jr.</a> (<span class="p-org org">Google</span>)
     <dt>Suggest an Edit for this Spec:
     <dd><a href="https://github.com/w3c/fxtf-drafts/blob/master/css-masking-1/Overview.bs">GitHub Editor</a>
     <dt>Issue Tracking:
     <dd><a href="https://github.com/w3c/fxtf-drafts/labels/css-masking-1">GitHub Issues</a>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>CSS Masking provides two means for partially or fully hiding portions of visual elements: masking and clipping.</p>
   <p>Masking describes how to use another graphical element or image as a luminance or alpha mask. Typically, rendering an element via CSS or SVG can conceptually be described as if the element, including its children, are drawn into a buffer and then that buffer is composited into the element’s parent. Luminance and alpha masks influence the transparency of this buffer before the compositing stage.</p>
   <p>Clipping describes the visible region of visual elements. The region can be described by using certain SVG graphics elements or basic shapes. Anything outside of this region is not rendered.</p>
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/fxtf-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “css-masking” in the title,
	preferably like this:
	“[css-masking] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-fxtf-archive/">archived</a>,
	and there is also a <a href="http://lists.w3.org/Archives/Public/public-fx/">historical archive</a>. </p>
   <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a> (part of the <a href="https://www.w3.org/Style/">Style Activity</a>). </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
     <ol class="toc">
      <li><a href="#clipping"><span class="secno">1.1</span> <span class="content">Clipping</span></a>
      <li><a href="#masking"><span class="secno">1.2</span> <span class="content">Masking</span></a>
     </ol>
    <li><a href="#placement"><span class="secno">2</span> <span class="content">Module interactions</span></a>
    <li><a href="#values"><span class="secno">3</span> <span class="content">Values</span></a>
    <li><a href="#terminology"><span class="secno">4</span> <span class="content">Terminology</span></a>
    <li>
     <a href="#clipping-paths"><span class="secno">5</span> <span class="content">Clipping Paths</span></a>
     <ol class="toc">
      <li><a href="#the-clip-path"><span class="secno">5.1</span> <span class="content">Clipping Shape: the <span class="property">clip-path</span> property</span></a>
     </ol>
    <li>
     <a href="#svg-clipping-paths"><span class="secno">6</span> <span class="content">SVG Clipping Path Sources</span></a>
     <ol class="toc">
      <li><a href="#ClipPathElement"><span class="secno">6.1</span> <span class="content">The <span>clipPath</span> element</span></a>
      <li><a href="#the-clip-rule"><span class="secno">6.2</span> <span class="content">Winding Rules: the <span class="property">clip-rule</span> property</span></a>
     </ol>
    <li>
     <a href="#positioned-masks"><span class="secno">7</span> <span class="content">Positioned Masks</span></a>
     <ol class="toc">
      <li><a href="#the-mask-image"><span class="secno">7.1</span> <span class="content">Mask Image Source: the <span class="property">mask-image</span> property</span></a>
      <li><a href="#the-mask-mode"><span class="secno">7.2</span> <span class="content">Mask Image Interpretation: the <span class="property">mask-mode</span> property</span></a>
      <li><a href="#the-mask-repeat"><span class="secno">7.3</span> <span class="content">Tiling Mask Images: the <span class="property">mask-repeat</span> property</span></a>
      <li><a href="#the-mask-position"><span class="secno">7.4</span> <span class="content">Positioning Mask Images: the <span class="property">mask-position</span> property</span></a>
      <li><a href="#the-mask-clip"><span class="secno">7.5</span> <span class="content">Masking Area: the <span class="property">mask-clip</span> property</span></a>
      <li><a href="#the-mask-origin"><span class="secno">7.6</span> <span class="content">Positioning Area: the <span class="property">mask-origin</span> property</span></a>
      <li><a href="#the-mask-size"><span class="secno">7.7</span> <span class="content">Sizing Mask Images: the <span class="property">mask-size</span> property</span></a>
      <li><a href="#the-mask-composite"><span class="secno">7.8</span> <span class="content">Compositing mask layers: the <span class="property">mask-composite</span> property</span></a>
      <li><a href="#the-mask"><span class="secno">7.9</span> <span class="content">Mask Shorthand: the <span class="property">mask</span> property</span></a>
      <li>
       <a href="#the-mask-image-rendering-model"><span class="secno">7.10</span> <span class="content">The Mask Image Rendering Model</span></a>
       <ol class="toc">
        <li><a href="#MaskValues"><span class="secno">7.10.1</span> <span class="content">Mask processing</span></a>
        <li><a href="#layering"><span class="secno">7.10.2</span> <span class="content">Layering Multiple Mask Images</span></a>
       </ol>
     </ol>
    <li>
     <a href="#mask-borders"><span class="secno">8</span> <span class="content">Border-Box Mask</span></a>
     <ol class="toc">
      <li><a href="#the-mask-border-source"><span class="secno">8.1</span> <span class="content">Mask Border Image Source: the <span class="property">mask-border-source</span> property</span></a>
      <li><a href="#the-mask-border-mode"><span class="secno">8.2</span> <span class="content">Mask Border Image Interpretation: the <span class="property">mask-border-mode</span> property</span></a>
      <li><a href="#the-mask-border-slice"><span class="secno">8.3</span> <span class="content">Mask Border Image Slicing: the <span class="property">mask-border-slice</span> property</span></a>
      <li><a href="#the-mask-border-width"><span class="secno">8.4</span> <span class="content">Masking Areas: the <span class="property">mask-border-width</span> property</span></a>
      <li><a href="#the-mask-border-outset"><span class="secno">8.5</span> <span class="content">Edge Overhang: the <span class="property">mask-border-outset</span> property</span></a>
      <li><a href="#the-mask-border-repeat"><span class="secno">8.6</span> <span class="content">Mask Border Image Tiling: the <span class="property">mask-border-repeat</span> property</span></a>
      <li><a href="#the-mask-border"><span class="secno">8.7</span> <span class="content">Mask Border Image Shorthand: the <span class="property">mask-border</span> property</span></a>
      <li><a href="#masking-with-the-mask-border-image"><span class="secno">8.8</span> <span class="content">Masking with the mask border image</span></a>
     </ol>
    <li>
     <a href="#svg-masks"><span class="secno">9</span> <span class="content">SVG Mask Sources</span></a>
     <ol class="toc">
      <li><a href="#MaskElement"><span class="secno">9.1</span> <span class="content">The <span>mask</span> element</span></a>
      <li><a href="#the-mask-type"><span class="secno">9.2</span> <span class="content">Mask Source Interpretation: the <span class="property">mask-type</span> property</span></a>
     </ol>
    <li><a href="#priv-sec"><span class="secno">10</span> <span class="content">Privacy and Security Considerations</span></a>
    <li><a href="#clip-property"><span class="secno"></span> <span class="content">Appendix A: The deprecated <span class="property">clip</span> property</span></a>
    <li><a href="#compute-stroke-bounding-box"><span class="secno"></span> <span class="content">Appendix B: Compute stroke bounding box</span></a>
    <li>
     <a href="#DOMInterfaces"><span class="secno"></span> <span class="content">Appendix C: DOM interfaces</span></a>
     <ol class="toc">
      <li><a href="#InterfaceSVGClipPathElement"><span class="secno"></span> <span class="content">Interface SVGClipPathElement</span></a>
      <li><a href="#InterfaceSVGMaskElement"><span class="secno"></span> <span class="content">Interface SVGMaskElement</span></a>
     </ol>
    <li><a href="#changes"><span class="secno"></span> <span class="content">Changes since last publication</span></a>
    <li><a href="#acknowledgments"><span class="secno"></span> <span class="content">Acknowledgments</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p><em>This section is not normative.</em></p>
   <p>This specification defines two different graphical operations which both fully or partly hide portions of an object: clipping and masking.</p>
   <h3 class="heading settled" data-level="1.1" id="clipping"><span class="secno">1.1. </span><span class="content">Clipping</span><a class="self-link" href="#clipping"></a></h3>
   <p>A closed vector path, shape or polygon defines a so called <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="clipping-path">clipping path</dfn>. This clipping path is a region (in the absence of anti-aliasing) where everything on the “inside” of this region is allowed to show through but everything on the outside is “clipped out” and does not appear on the canvas.</p>
   <div class="example" id="example-8d45bf9b">
    <a class="self-link" href="#example-8d45bf9b"></a> 
    <div class="figure">
      <img alt="Example Mask" height="260" src="images/clipping-path.svg" width="655"> 
     <p class="caption">A clipping path (middle) is applied on a polygon shaded with different colors (left). This results in a “clipped out” shape (right).</p>
    </div>
   </div>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-clip-path" id="ref-for-propdef-clip-path">clip-path</a> property can use specified basic shapes as clipping path or reference an <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath">clipPath</a> element with <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#graphics-element" id="ref-for-graphics-element">graphics elements</a> to be used as clipping path.</p>
   <h3 class="heading settled" data-level="1.2" id="masking"><span class="secno">1.2. </span><span class="content">Masking</span><a class="self-link" href="#masking"></a></h3>
   <p>The effect of applying a mask to a graphical object is as if the graphical object will be painted onto the background through a mask, thus completely or partially masking out parts of the graphical object.</p>
   <div class="example" id="example-c9ae2e2a">
    <a class="self-link" href="#example-c9ae2e2a"></a> 
    <div class="figure">
      <img alt="Example Mask" height="260" src="images/luminance-mask.svg" width="655"> 
     <p class="caption">A luminance mask (middle) is applied on a shape filled with a gradient (left). This results in a masked shape (right).</p>
    </div>
   </div>
   <p>Masks are applied using the <a class="property" data-link-type="propdesc" href="#propdef-mask-image" id="ref-for-propdef-mask-image">mask-image</a> or <a class="property" data-link-type="propdesc" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source">mask-border-source</a> properties.</p>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-mask-image" id="ref-for-propdef-mask-image①">mask-image</a> property may reference a <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask">mask</a> element. The content of the <span id="ref-for-elementdef-mask①">mask</span> element serves as the mask.</p>
   <p>Alternatively, for many simple uses, the <a class="property" data-link-type="propdesc" href="#propdef-mask-image" id="ref-for-propdef-mask-image②">mask-image</a> property may refer directly to images to be used as mask, forgoing the need for an explicit <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask②">mask</a> element. This mask can then be sized and positioned just like CSS background images using the <a class="property" data-link-type="propdesc" href="#propdef-mask-position" id="ref-for-propdef-mask-position">mask-position</a>, <a class="property" data-link-type="propdesc" href="#propdef-mask-size" id="ref-for-propdef-mask-size">mask-size</a> and other characterizing properties.</p>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source①">mask-border-source</a> property splits a mask into 9 pieces. The pieces may be sliced, scaled and stretched in various ways to fit the size of the <a data-link-type="dfn" href="#mask-border-image-area" id="ref-for-mask-border-image-area">mask border image area</a>. The <a class="property" data-link-type="propdesc" href="#propdef-mask-border" id="ref-for-propdef-mask-border">mask-border</a> property serves as a shorthand property for <span class="property" id="ref-for-propdef-mask-border-source②">mask-border-source</span> and other characterizing properties.</p>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-mask" id="ref-for-propdef-mask">mask</a> property serves as a shorthand property for all <a class="property" data-link-type="propdesc" href="#propdef-mask-border" id="ref-for-propdef-mask-border①">mask-border</a> and <a class="property" data-link-type="propdesc" href="#propdef-mask-image" id="ref-for-propdef-mask-image③">mask-image</a> affiliated properties.</p>
   <p class="note" role="note"><span>Note:</span> While masking gives many possibilities for enhanced graphical effects and in general provides more control over the “visible portions” of the content, clipping paths can perform better and basic shapes are easier to interpolate.</p>
   <h2 class="heading settled" data-level="2" id="placement"><span class="secno">2. </span><span class="content">Module interactions</span><a class="self-link" href="#placement"></a></h2>
   <p>This specification defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied. These effects are applied after elements have been sized and positioned according to the <a href="https://www.w3.org/TR/CSS2/visuren.html" title="Visual formatting model">Visual formatting model</a> from <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>. Some values of these properties result in the creation of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#stacking-context" id="ref-for-stacking-context">stacking context</a>. Furthermore, this specification replaces the section <a href="https://www.w3.org/TR/CSS2/visufx.html#clipping">Clipping: the clip property</a> from <span>[CSS21]</span>.</p>
   <p>The compositing model follows the SVG compositing model <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a>: First the element is styled under absence of filter effects, masking, clipping and opacity. Then the element and its descendants are drawn on a temporary canvas. In a last step the following effects are applied to the element in order: filter effects <a data-link-type="biblio" href="#biblio-filter-effects">[FILTER-EFFECTS]</a>, clipping, masking and opacity.</p>
   <p>This specification allows compositing multiple mask layers with the Porter Duff compositing operators defined in CSS Compositing and Blending <a data-link-type="biblio" href="#biblio-compositing-1">[COMPOSITING-1]</a>.</p>
   <p>The term <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/coords.html#TermObjectBoundingBox" id="ref-for-TermObjectBoundingBox">object bounding box</a> follows the definition in SVG 1.1 <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a>.</p>
   <h2 class="heading settled" data-level="3" id="values"><span class="secno">3. </span><span class="content">Values</span><a class="self-link" href="#values"></a></h2>
   <p>This specification follows the <a href="https://www.w3.org/TR/CSS21/about.html#property-defs">CSS property definition conventions</a> from <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>. Basic shapes are defined in CSS Shapes Module Level 1 <a data-link-type="biblio" href="#biblio-css-shapes">[CSS-SHAPES]</a>. Value types not defined in these specifications are defined in CSS Values and Units Module Level 3 <a data-link-type="biblio" href="#biblio-css3val">[CSS3VAL]</a>.</p>
   <p>In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept CSS-wide keywords such as <a href="https://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> as their property value <a data-link-type="biblio" href="#biblio-css3val">[CSS3VAL]</a>. For readability it has not been repeated explicitly.</p>
   <h2 class="heading settled" data-level="4" id="terminology"><span class="secno">4. </span><span class="content">Terminology</span><a class="self-link" href="#terminology"></a></h2>
   <p>Definitions of CSS properties and values in this specification are analogous to definitions in CSS Backgrounds and Borders <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a>. To avoid redundancy, this specification relies on descriptions and definitions of CSS Backgrounds and Borders. The following terms in CSS Backgrounds and Borders have the following meaning in this specification:</p>
   <table class="data" id="term-matching">
    <thead>
     <tr>
      <th>Term in CSS Masking 
      <th>Term in <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a> 
    <tbody>
     <tr>
      <th><a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image">mask layer image</a> 
      <td>background images 
     <tr>
      <th><a data-link-type="dfn" href="#mask-painting-area" id="ref-for-mask-painting-area">mask painting area</a> 
      <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-backgrounds-3/#background-painting-area" id="ref-for-background-painting-area">background painting area</a> 
     <tr>
      <th><dfn data-dfn-type="dfn" data-export id="mask-size">mask-size<a class="self-link" href="#mask-size"></a></dfn> 
      <td>background-size 
     <tr>
      <th><dfn data-dfn-type="dfn" data-export id="mask-position">mask-position<a class="self-link" href="#mask-position"></a></dfn> 
      <td>background-position 
     <tr>
      <th><a data-link-type="dfn" href="#mask-positioning-area" id="ref-for-mask-positioning-area">mask positioning area</a> 
      <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-backgrounds-3/#background-positioning-area" id="ref-for-background-positioning-area">background positioning area</a> 
     <tr>
      <th><a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image">mask border image</a> 
      <td>border-image 
     <tr>
      <th><a data-link-type="dfn" href="#mask-border-image-area" id="ref-for-mask-border-image-area①">mask border image area</a> 
      <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-area" id="ref-for-border-image-area">border image area</a> 
   </table>
   <h2 class="heading settled" data-level="5" id="clipping-paths"><span class="secno">5. </span><span class="content">Clipping Paths</span><a class="self-link" href="#clipping-paths"></a></h2>
   <p>The clipping path restricts the region to which paint can be applied, the so-called <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="clipping-region">clipping region</dfn>. Conceptually, any parts of the drawing that lie outside of this region are not drawn. This includes any content, background, borders, text decoration, outline and visible scrolling mechanism of the element to which the clipping path is applied, and those of its descendants.</p>
   <p>An element’s ancestors may also clip portions of their content (e.g., via their own <a class="property" data-link-type="propdesc" href="#propdef-clip" id="ref-for-propdef-clip">clip</a> or <a class="property" data-link-type="propdesc" href="#propdef-clip-path" id="ref-for-propdef-clip-path①">clip-path</a> properties and/or if their <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow">overflow</a> property is not <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible" id="ref-for-valdef-overflow-visible">visible</a>). What is rendered is the cumulative intersection.</p>
   <p>If the clipping region exceeds the bounds of the UA’s document window, content may be clipped to that window by the native operating environment.</p>
   <p>A clipping path affects the rendering of an element. It does not affect the element’s inherent geometry. The geometry of a clipped element (i.e. an element which references a <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath①">clipPath</a> element via a <a class="property" data-link-type="propdesc" href="#propdef-clip-path" id="ref-for-propdef-clip-path②">clip-path</a> property, or a child of the referencing element) must remain the same as if it were not clipped.</p>
   <div class="example" id="example-b04372df">
    <a class="self-link" href="#example-b04372df"></a> Consider a shape that is clipped by a clipping path applied to an ancestor: 
<pre><code class="highlight"><c- p>&lt;</c-><c- f>g</c-> <c- e>clip-path</c-><c- o>=</c-><c- s>"circle()"</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>path</c-> <c- e>id</c-><c- o>=</c-><c- s>"shape"</c-> <c- e>d</c-><c- o>=</c-><c- s>"M0,0 L10,10, L 20,0 z"</c-><c- p>/></c->
<c- p>&lt;/</c-><c- f>g</c-><c- p>></c->
</code></pre>
    <p>The shape is referenced by a <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-use" id="ref-for-elementdef-use">use</a> element:</p>
<pre><code class="highlight"><c- p>&lt;</c-><c- f>use</c-> <c- e>xlink:href</c-><c- o>=</c-><c- s>"#shape"</c-><c- p>/></c->
</code></pre>
    <p>The geometry of the shape is not influenced by the circular clipping path.</p>
   </div>
   <p>By default, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/interact.html#PointerEventsProperty" id="ref-for-PointerEventsProperty">pointer-events</a> must not be dispatched on the clipped-out (non-visible) regions of a shape. For example, an element with a dimension of 10px to 10px which is clipped to a circle with a radius of 5px will not receive <span class="css">click</span> events outside the <a data-link-type="dfn" href="#clipping-region" id="ref-for-clipping-region">clipping region</a>.</p>
   <h3 class="heading settled" data-level="5.1" id="the-clip-path"><span class="secno">5.1. </span><span class="content">Clipping Shape: the <a class="property" data-link-type="propdesc" href="#propdef-clip-path" id="ref-for-propdef-clip-path③">clip-path</a> property</span><a class="self-link" href="#the-clip-path"></a></h3>
   <table class="def propdef" data-link-for-hint="clip-path">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-clip-path">clip-path</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="#typedef-clip-source" id="ref-for-typedef-clip-source">&lt;clip-source></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> [ <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-shapes-2/#typedef-basic-shape" id="ref-for-typedef-basic-shape">&lt;basic-shape></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any">||</a> <a class="production css" data-link-type="type" href="#typedef-geometry-box" id="ref-for-typedef-geometry-box">&lt;geometry-box></a> ] <span id="ref-for-comb-one①">|</span> none
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>none
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#container-element" id="ref-for-container-element">container elements</a> excluding the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-defs" id="ref-for-elementdef-defs">defs</a> element, all <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#graphics-element" id="ref-for-graphics-element①">graphics elements</a> and the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-use" id="ref-for-elementdef-use①">use</a> element
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified, but with <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#url-value" id="ref-for-url-value">&lt;url></a> values made absolute
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>Specifies a basic shape or references a <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath②">clipPath</a> element to create a <a data-link-type="dfn" href="#clipping-path" id="ref-for-clipping-path">clipping path</a>.</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-clip-source">&lt;clip-source></dfn> = <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#url-value" id="ref-for-url-value①">&lt;url></a></pre>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-geometry-box">&lt;geometry-box></dfn> = <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-shapes-1/#typedef-shape-box" id="ref-for-typedef-shape-box" title="Expands to: border-box | content-box | margin-box | padding-box">&lt;shape-box></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> fill-box <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③">|</a> stroke-box <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> view-box</pre>
   <div>
    <dl>
     <dt data-md><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-shapes-2/#typedef-basic-shape" id="ref-for-typedef-basic-shape①">&lt;basic-shape></a>
     <dd data-md>
      <p>A basic shape function as defined in the CSS Shapes module <a data-link-type="biblio" href="#biblio-css-shapes">[CSS-SHAPES]</a>. A basic shape makes use of the specified reference box to size and position the basic shape. If no reference box is specified, the <a class="css" data-link-type="maybe" href="#valdef-mask-clip-border-box" id="ref-for-valdef-mask-clip-border-box">border-box</a> will be used as reference box.</p>
     <dt data-md><a class="production css" data-link-type="type" href="#typedef-geometry-box" id="ref-for-typedef-geometry-box①">&lt;geometry-box></a>
     <dd data-md>
      <p>If specified in combination with a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-shapes-2/#typedef-basic-shape" id="ref-for-typedef-basic-shape②">&lt;basic-shape></a> it provides the reference box for the <span class="production" id="ref-for-typedef-basic-shape③">&lt;basic-shape></span>.</p>
      <p>If specified by itself, uses the edges of the specified box, including any corner shaping (e.g. defined by <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-radius" id="ref-for-propdef-border-radius">border-radius</a> <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a>), as clipping path. See also <a href="https://www.w3.org/TR/css-shapes/#shapes-from-box-values">“Shapes from box values”</a> <a data-link-type="biblio" href="#biblio-css-shapes">[CSS-SHAPES]</a>.</p>
      <p></p>
     <dt data-md><dfn class="dfn-paneled css" data-dfn-for="clip-path" data-dfn-type="value" data-export id="valdef-clip-path-fill-box">fill-box</dfn>
     <dd data-md>
      <p>Uses the <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/coords.html#TermObjectBoundingBox" id="ref-for-TermObjectBoundingBox①">object bounding box</a> as reference box.</p>
     <dt data-md><dfn class="dfn-paneled css" data-dfn-for="clip-path" data-dfn-type="value" data-export id="valdef-clip-path-stroke-box">stroke-box</dfn>
     <dd data-md>
      <p>Uses the <a data-link-type="dfn" href="#stroke-bounding-box" id="ref-for-stroke-bounding-box">stroke bounding box</a> as reference box.</p>
     <dt data-md><dfn class="dfn-paneled css" data-dfn-for="clip-path" data-dfn-type="value" data-export id="valdef-clip-path-view-box">view-box</dfn>
     <dd data-md>
      <p>Uses the nearest <a href="https://www.w3.org/TR/SVG11/intro.html#TermSVGViewport">SVG viewport</a> as reference box.</p>
      <p>If a <a data-link-type="element-attr" href="https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute" id="ref-for-ViewBoxAttribute">viewBox</a> attribute is specified for the <a href="https://www.w3.org/TR/SVG11/intro.html#TermSVGViewport">SVG viewport</a> creating element:</p>
      <ul>
       <li data-md>
        <p>The reference box is positioned at the origin of the coordinate system established by the <a data-link-type="element-attr" href="https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute" id="ref-for-ViewBoxAttribute①">viewBox</a> attribute.</p>
       <li data-md>
        <p>The dimension of the reference box is set to the <em>width</em> and <em>height</em> values of the <a data-link-type="element-attr" href="https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute" id="ref-for-ViewBoxAttribute②">viewBox</a> attribute.</p>
      </ul>
     <dt data-md>none
     <dd data-md>
      <p>No <a data-link-type="dfn" href="#clipping-path" id="ref-for-clipping-path①">clipping path</a> gets created.</p>
    </dl>
   </div>
   <p>For SVG elements without associated CSS layout box, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value">used value</a> for <a class="css" data-link-type="maybe" href="#valdef-mask-clip-content-box" id="ref-for-valdef-mask-clip-content-box">content-box</a> and <a class="css" data-link-type="maybe" href="#valdef-mask-clip-padding-box" id="ref-for-valdef-mask-clip-padding-box">padding-box</a> is <a class="css" data-link-type="maybe" href="#valdef-clip-path-fill-box" id="ref-for-valdef-clip-path-fill-box">fill-box</a> and for <a class="css" data-link-type="maybe" href="#valdef-mask-clip-border-box" id="ref-for-valdef-mask-clip-border-box①">border-box</a> and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-masking-1/#valuedef-margin-box0" id="ref-for-valuedef-margin-box0">margin-box</a> is <a class="css" data-link-type="maybe" href="#valdef-clip-path-stroke-box" id="ref-for-valdef-clip-path-stroke-box">stroke-box</a>.</p>
   <p>For elements with associated CSS layout box, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value①">used value</a> for <a class="css" data-link-type="maybe" href="#valdef-clip-path-fill-box" id="ref-for-valdef-clip-path-fill-box①">fill-box</a> is <a class="css" data-link-type="maybe" href="#valdef-mask-clip-content-box" id="ref-for-valdef-mask-clip-content-box①">content-box</a> and for <a class="css" data-link-type="maybe" href="#valdef-clip-path-stroke-box" id="ref-for-valdef-clip-path-stroke-box①">stroke-box</a> and <a class="css" data-link-type="maybe" href="#valdef-clip-path-view-box" id="ref-for-valdef-clip-path-view-box">view-box</a> is <a class="css" data-link-type="maybe" href="#valdef-mask-clip-border-box" id="ref-for-valdef-mask-clip-border-box②">border-box</a>.</p>
   <p>A computed value of other than <span class="css">none</span> results in the creation of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#stacking-context" id="ref-for-stacking-context①">stacking context</a> <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> the same way that CSS <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity">opacity</a> <a data-link-type="biblio" href="#biblio-css3color">[CSS3COLOR]</a> does for values other than <span class="css">1</span>.</p>
   <p>If the URI reference is not valid (e.g it points to an object that doesn’t exist or the object is not a <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath③">clipPath</a> element), no clipping is applied.</p>
   <div class="example" id="example-b11e2c6d">
    <a class="self-link" href="#example-b11e2c6d"></a> This example demonstrates the use of the basic shape <a class="production css" data-link-type="function" href="https://drafts.csswg.org/css-shapes-1/#funcdef-polygon" id="ref-for-funcdef-polygon">&lt;polygon()></a> as clipping path. Each space separated length pair represents one point of the polygon. The visualized clipping path can be seen in the <a href="#clipping">introduction</a>. 
<pre><code class="highlight">clip-path: polygon(15px 99px, 30px 87px, 65px 99px, 85px 55px,
        122px 57px, 184px 73px, 198px 105px, 199px 150px,
        145px 159px, 155px 139px, 126px 120px, 112px 138px,
        80px 128px, 39px 126px, 24px 104px);
</code></pre>
   </div>
   <div class="example" id="example-32370653">
    <a class="self-link" href="#example-32370653"></a> In this example, the <a class="property" data-link-type="propdesc" href="#propdef-clip-path" id="ref-for-propdef-clip-path④">clip-path</a> property references an SVG <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath④">clipPath</a> element. Each comma separated length pair represents one point of the polygon. As for the previous example, the visualized clipping path can be seen in the <a href="#clipping">introduction</a>.
    <p></p>
<pre><code class="highlight">clip-path: url("#clip1");
</code></pre>
<pre><code class="highlight"><c- f>&lt;clipPath</c-> <c- e>id=</c-><c- s>"clip1"</c-><c- f>></c->
    <c- f>&lt;polygon</c-> <c- e>points=</c-><c- s>"15,99 30,87 65,99 85,55 122,57 184,73 198,105</c->
<c- s>        199,150 145,159 155,139 126,120 112,138 80,128 39,126 24,104"</c-><c- f>/></c->
<c- f>&lt;/clipPath></c->
</code></pre>
   </div>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-clip-path" id="ref-for-propdef-clip-path⑤">clip-path</a> property is a <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermPresentationAttribute">presentation attribute</a> for SVG elements.</p>
   <h2 class="heading settled" data-level="6" id="svg-clipping-paths"><span class="secno">6. </span><span class="content">SVG Clipping Path Sources</span><a class="self-link" href="#svg-clipping-paths"></a></h2>
   <h3 class="heading settled" data-level="6.1" id="ClipPathElement"><span class="secno">6.1. </span><span class="content">The <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath⑤">clipPath</a> element</span><a class="self-link" href="#ClipPathElement"></a></h3>
   <table class="definition-table">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled" data-dfn-type="element" data-export id="elementdef-clippath"><code>clipPath</code></dfn> 
     <tr>
      <th>Categories:
      <td><a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#container-element" id="ref-for-container-element①">container elements</a>, <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/render.html#TermNeverRenderedElement" id="ref-for-TermNeverRenderedElement">never-rendered element</a>
     <tr>
      <th>Content model:
      <td>
       Any number of the following elements, in any order: 
       <ul class="no-bullets">
        <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermDescriptiveElement">descriptive</a> <span class="expanding"> — <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-desc" id="ref-for-elementdef-desc">desc</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-title" id="ref-for-elementdef-title">title</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-metadata" id="ref-for-elementdef-metadata">metadata</a></span>
        <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermAnimationElement">animation</a> <span class="expanding"> — <a data-link-type="element" href="https://www.w3.org/TR/SVG11/animate.html#AnimateElement" id="ref-for-AnimateElement">animate</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG11/animate.html#AnimateColorElement" id="ref-for-AnimateColorElement">animateColor</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement" id="ref-for-AnimateMotionElement">animateMotion</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement" id="ref-for-AnimateTransformElement">animateTransform</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG11/animate.html#SetElement" id="ref-for-SetElement">set</a></span>
        <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermShapeElement">shape</a> <span class="expanding"> — <a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-circle" id="ref-for-elementdef-circle">circle</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-ellipse" id="ref-for-elementdef-ellipse">ellipse</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-line" id="ref-for-elementdef-line">line</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/paths.html#elementdef-path" id="ref-for-elementdef-path">path</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-polygon" id="ref-for-elementdef-polygon">polygon</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-polyline" id="ref-for-elementdef-polyline">polyline</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-rect" id="ref-for-elementdef-rect">rect</a></span>
        <li><a data-link-type="element" href="https://svgwg.org/svg2-draft/text.html#elementdef-text" id="ref-for-elementdef-text">text</a>
        <li><a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-use" id="ref-for-elementdef-use②">use</a>
        <li><a data-link-type="element" href="https://svgwg.org/svg2-draft/interact.html#elementdef-script" id="ref-for-elementdef-script">script</a>
       </ul>
     <tr>
      <th>Attributes:
      <td>
       <ul class="no-bullets">
        <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermConditionalProcessingAttribute">conditional processing attributes</a><span class="expanding"> — <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredFeaturesAttribute"><span class="attr-name">‘requiredFeatures’</span></a>, <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredExtensionsAttribute"><span class="attr-name">‘requiredExtensions’</span></a>, <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SystemLanguageAttribute"><span class="attr-name">‘systemLanguage’</span></a></span>
        <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span>
        <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermPresentationAttribute">presentation attributes</a><span class="expanding"> — <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-inline-3/#propdef-alignment-baseline" id="ref-for-propdef-alignment-baseline">alignment-baseline</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-inline-3/#propdef-baseline-shift" id="ref-for-propdef-baseline-shift">baseline-shift</a>, <a class="property" data-link-type="propdesc" href="#propdef-clip" id="ref-for-propdef-clip①">clip</a>, <a class="property" data-link-type="propdesc" href="#propdef-clip-path" id="ref-for-propdef-clip-path⑥">clip-path</a>, <a class="property" data-link-type="propdesc" href="#propdef-clip-rule" id="ref-for-propdef-clip-rule">clip-rule</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-color" id="ref-for-propdef-color">color</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#ColorInterpolationProperty" id="ref-for-ColorInterpolationProperty">color-interpolation</a>, <a class="property" data-link-type="propdesc" href="https://drafts.fxtf.org/filter-effects-1/#propdef-color-interpolation-filters" id="ref-for-propdef-color-interpolation-filters">color-interpolation-filters</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/SVG11/color.html#ColorProfileProperty" id="ref-for-ColorProfileProperty">color-profile</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/SVG11/painting.html#ColorRenderingProperty" id="ref-for-ColorRenderingProperty">color-rendering</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-ui-4/#propdef-cursor" id="ref-for-propdef-cursor">cursor</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction">direction</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display">display</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-inline-3/#propdef-dominant-baseline" id="ref-for-propdef-dominant-baseline">dominant-baseline</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/SVG11/filters.html#EnableBackgroundProperty" id="ref-for-EnableBackgroundProperty">enable-background</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#FillProperty" id="ref-for-FillProperty">fill</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#FillOpacityProperty" id="ref-for-FillOpacityProperty">fill-opacity</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#FillRuleProperty" id="ref-for-FillRuleProperty">fill-rule</a>, <a class="property" data-link-type="propdesc" href="https://drafts.fxtf.org/filter-effects-1/#propdef-filter" id="ref-for-propdef-filter">filter</a>, <a class="property" data-link-type="propdesc" href="https://drafts.fxtf.org/filter-effects-1/#propdef-flood-color" id="ref-for-propdef-flood-color">flood-color</a>, <a class="property" data-link-type="propdesc" href="https://drafts.fxtf.org/filter-effects-1/#propdef-flood-opacity" id="ref-for-propdef-flood-opacity">flood-opacity</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font" id="ref-for-propdef-font">font</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-family" id="ref-for-propdef-font-family">font-family</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size" id="ref-for-propdef-font-size">font-size</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-size-adjust" id="ref-for-propdef-font-size-adjust">font-size-adjust</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-stretch" id="ref-for-propdef-font-stretch">font-stretch</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-style" id="ref-for-propdef-font-style">font-style</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-variant" id="ref-for-propdef-font-variant">font-variant</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-weight" id="ref-for-propdef-font-weight">font-weight</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/SVG11/text.html#GlyphOrientationHorizontalProperty" id="ref-for-GlyphOrientationHorizontalProperty">glyph-orientation-horizontal</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-glyph-orientation-vertical" id="ref-for-propdef-glyph-orientation-vertical">glyph-orientation-vertical</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-images-3/#propdef-image-rendering" id="ref-for-propdef-image-rendering">image-rendering</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/SVG11/text.html#KerningProperty" id="ref-for-KerningProperty">kerning</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-letter-spacing" id="ref-for-propdef-letter-spacing">letter-spacing</a>, <a class="property" data-link-type="propdesc" href="https://drafts.fxtf.org/filter-effects-1/#propdef-lighting-color" id="ref-for-propdef-lighting-color">lighting-color</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#MarkerProperty" id="ref-for-MarkerProperty">marker</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#MarkerEndProperty" id="ref-for-MarkerEndProperty">marker-end</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#MarkerMidProperty" id="ref-for-MarkerMidProperty">marker-mid</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#MarkerStartProperty" id="ref-for-MarkerStartProperty">marker-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-mask" id="ref-for-propdef-mask①">mask</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity①">opacity</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow①">overflow</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/interact.html#PointerEventsProperty" id="ref-for-PointerEventsProperty①">pointer-events</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#ShapeRenderingProperty" id="ref-for-ShapeRenderingProperty">shape-rendering</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/pservers.html#StopColorProperty" id="ref-for-StopColorProperty">stop-color</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/pservers.html#StopOpacityProperty" id="ref-for-StopOpacityProperty">stop-opacity</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeProperty" id="ref-for-StrokeProperty">stroke</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeDasharrayProperty" id="ref-for-StrokeDasharrayProperty">stroke-dasharray</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeDashoffsetProperty" id="ref-for-StrokeDashoffsetProperty">stroke-dashoffset</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeLinecapProperty" id="ref-for-StrokeLinecapProperty">stroke-linecap</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeLinejoinProperty" id="ref-for-StrokeLinejoinProperty">stroke-linejoin</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeMiterlimitProperty" id="ref-for-StrokeMiterlimitProperty">stroke-miterlimit</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeOpacityProperty" id="ref-for-StrokeOpacityProperty">stroke-opacity</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeWidthProperty" id="ref-for-StrokeWidthProperty">stroke-width</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/text.html#TextAnchorProperty" id="ref-for-TextAnchorProperty">text-anchor</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration" id="ref-for-propdef-text-decoration">text-decoration</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#TextRenderingProperty" id="ref-for-TextRenderingProperty">text-rendering</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi">unicode-bidi</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visufx.html#propdef-visibility" id="ref-for-propdef-visibility">visibility</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-word-spacing" id="ref-for-propdef-word-spacing">word-spacing</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a></span>
        <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#ClassAttribute"><span class="attr-name">‘class’</span></a>
        <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#StyleAttribute"><span class="attr-name">‘style’</span></a>
        <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#ExternalResourcesRequiredAttribute"><span class="attr-name">‘externalResourcesRequired’</span></a>
        <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#TransformAttribute"><span class="attr-name">‘transform’</span></a>
        <li>‘<a data-link-type="element-attr" href="#element-attrdef-clippath-clippathunits" id="ref-for-element-attrdef-clippath-clippathunits">clipPathUnits</a>’
       </ul>
     <tr>
      <th>DOM Interfaces:
      <td><a class="idlinterface" href="#InterfaceSVGClipPathElement">SVGClipPathElement</a>
   </table>
   <p><em>Attribute definitions:</em></p>
   <dl>
    <dt data-md><dfn class="dfn-paneled" data-dfn-for="clipPath" data-dfn-type="element-attr" data-export id="element-attrdef-clippath-clippathunits"><code>clipPathUnits</code></dfn> = "<a class="css" data-link-type="maybe" href="#valdef-clippathunits-userspaceonuse" id="ref-for-valdef-clippathunits-userspaceonuse">userSpaceOnUse</a> | <a class="css" data-link-type="maybe" href="#valdef-clippathunits-objectboundingbox" id="ref-for-valdef-clippathunits-objectboundingbox">objectBoundingBox</a>"
    <dd data-md>
     <p>Defines the coordinate system for the contents of the <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath⑥">clipPath</a>.</p>
     <p></p>
     <dl>
      <dt data-md><dfn class="dfn-paneled css" data-dfn-for="clipPathUnits" data-dfn-type="value" data-export id="valdef-clippathunits-userspaceonuse">userSpaceOnUse</dfn>
      <p></p>
      <dd data-md>
       <p>The contents of the <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath⑦">clipPath</a> represent values in the current <a data-link-type="dfn" href="https://drafts.csswg.org/css-transforms-1/#user-coordinate-system" id="ref-for-user-coordinate-system">user coordinate system</a> in place at the time when the <span id="ref-for-elementdef-clippath⑧">clipPath</span> element is referenced (i.e., the <span id="ref-for-user-coordinate-system①">user coordinate system</span> for the element referencing the <span id="ref-for-elementdef-clippath⑨">clipPath</span> element via the <a class="property" data-link-type="propdesc" href="#propdef-clip-path" id="ref-for-propdef-clip-path⑦">clip-path</a> property).</p>
       <p></p>
      <dt data-md><dfn class="dfn-paneled css" data-dfn-for="clipPathUnits" data-dfn-type="value" data-export id="valdef-clippathunits-objectboundingbox">objectBoundingBox</dfn>
      <p></p>
      <dd data-md>
       <p>The coordinate system has its origin at the top left corner of the <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/coords.html#bounding-box" id="ref-for-bounding-box">bounding box</a> of the element to which the clipping path applies to and the same width and height of this <span id="ref-for-bounding-box①">bounding box</span>. <a href="https://www.w3.org/TR/SVG/coords.html#Units">User coordinates</a> are sized equivalently to the CSS <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#px" id="ref-for-px">px</a> unit.</p>
       <p></p>
     </dl>
     <p>If attribute <a data-link-type="element-attr" href="#element-attrdef-clippath-clippathunits" id="ref-for-element-attrdef-clippath-clippathunits①">clipPathUnits</a> is not specified, then the effect is as if a value of <a class="css" data-link-type="maybe" href="#valdef-clippathunits-userspaceonuse" id="ref-for-valdef-clippathunits-userspaceonuse①">userSpaceOnUse</a> were specified.</p>
     <p></p>
     <p>Animatable: yes.</p>
   </dl>
   <p>CSS properties inherit into the <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath①⓪">clipPath</a> element from its ancestors; properties do <em>not</em> inherit from the element referencing the <span id="ref-for-elementdef-clippath①①">clipPath</span> element.</p>
   <p><a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath①②">clipPath</a> elements are never rendered directly; their only usage is as something that can be referenced using the <a class="property" data-link-type="propdesc" href="#propdef-clip-path" id="ref-for-propdef-clip-path⑧">clip-path</a> property. The <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display①">display</a> property does not apply to the <span id="ref-for-elementdef-clippath①③">clipPath</span> element; thus, <span id="ref-for-elementdef-clippath①④">clipPath</span> elements are not directly rendered even if the <span class="property" id="ref-for-propdef-display②">display</span> property is set to a value other than <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-none" id="ref-for-valdef-display-none">none</a>, and <span id="ref-for-elementdef-clippath①⑤">clipPath</span> elements are available for referencing even when the <span class="property" id="ref-for-propdef-display③">display</span> property on the <span id="ref-for-elementdef-clippath①⑥">clipPath</span> element or any of its ancestors is set to <span class="css" id="ref-for-valdef-display-none①">none</span>.</p>
   <p>A <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath①⑦">clipPath</a> element can contain <a data-link-type="element" href="https://svgwg.org/svg2-draft/paths.html#elementdef-path" id="ref-for-elementdef-path①">path</a> elements, <a data-link-type="element" href="https://svgwg.org/svg2-draft/text.html#elementdef-text" id="ref-for-elementdef-text①">text</a> elements, <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/shapes.html#basic-shape" id="ref-for-basic-shape">basic shapes</a> (such as <a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-circle" id="ref-for-elementdef-circle①">circle</a>) or a <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-use" id="ref-for-elementdef-use③">use</a> element. If a <span id="ref-for-elementdef-use④">use</span> element is a child of a <span id="ref-for-elementdef-clippath①⑧">clipPath</span> element, it must directly reference <span id="ref-for-elementdef-path②">path</span>, <span id="ref-for-elementdef-text②">text</span> or <span id="ref-for-basic-shape①">basic shapes</span> elements. Indirect references are an error and the <span id="ref-for-elementdef-clippath①⑨">clipPath</span> element must be ignored.</p>
   <p class="issue" id="issue-d0c561ed"><a class="self-link" href="#issue-d0c561ed"></a> Firefox disables rendering of elements referencing clipPaths with violated content model. No browser ignores clipPath on use with indirect reference. <a href="https://github.com/w3c/fxtf-drafts/issues/17">&lt;https://github.com/w3c/fxtf-drafts/issues/17></a></p>
   <p>The raw geometry of each child element exclusive of rendering properties such as <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#FillProperty" id="ref-for-FillProperty①">fill</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeProperty" id="ref-for-StrokeProperty①">stroke</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeWidthProperty" id="ref-for-StrokeWidthProperty①">stroke-width</a> within a <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath②⓪">clipPath</a> conceptually defines a 1-bit mask (with the possible exception of anti-aliasing along the edge of the geometry) which represents the silhouette of the graphics associated with that element. Anything outside the outline of the object is masked out. If a child element is made invisible by <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display④">display</a> or <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visufx.html#propdef-visibility" id="ref-for-propdef-visibility①">visibility</a> it does not contribute to the clipping path. When the <span id="ref-for-elementdef-clippath②①">clipPath</span> element contains multiple child elements, the silhouettes of the child elements are logically OR’d together to create a single silhouette which is then used to restrict the region onto which paint can be applied. Thus, a point is inside the clipping path if it is inside any of the children of the <span id="ref-for-elementdef-clippath②②">clipPath</span>.</p>
   <p class="issue" id="issue-1eaffdcc"><a class="self-link" href="#issue-1eaffdcc"></a> Define raw geometry with regards to CSS properties that affect it. Especially on text. <a href="https://github.com/w3c/fxtf-drafts/issues/170">&lt;https://github.com/w3c/fxtf-drafts/issues/170></a></p>
   <p>For a given <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#graphics-element" id="ref-for-graphics-element②">graphics element</a>, the actual clipping path used will be the intersection of the clipping path specified by its <a class="property" data-link-type="propdesc" href="#propdef-clip-path" id="ref-for-propdef-clip-path⑨">clip-path</a> property (if any) with any clipping paths on its ancestors, as specified by the <span class="property" id="ref-for-propdef-clip-path①⓪">clip-path</span> property on the elements which establish a new viewport. (See <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a>)</p>
   <p>A couple of additions:</p>
   <ul>
    <li data-md>
     <p>The <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath②③">clipPath</a> element itself and its child elements do <em>not</em> inherit clipping paths from the ancestors of the <span id="ref-for-elementdef-clippath②④">clipPath</span> element.</p>
    <p></p>
    <li data-md>
     <p>The <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath②⑤">clipPath</a> element or any of its children can specify property <a class="property" data-link-type="propdesc" href="#propdef-clip-path" id="ref-for-propdef-clip-path①①">clip-path</a>.<br> If a valid <span class="property" id="ref-for-propdef-clip-path①②">clip-path</span> reference is placed on a <span id="ref-for-elementdef-clippath②⑥">clipPath</span> element, the resulting clipping path is the intersection of the contents of the <span id="ref-for-elementdef-clippath②⑦">clipPath</span> element with the referenced clipping path.<br> If a valid <span class="property" id="ref-for-propdef-clip-path①③">clip-path</span> reference is placed on one of the children of a <span id="ref-for-elementdef-clippath②⑧">clipPath</span> element, then the given child element is clipped by the referenced clipping path before OR’ing the silhouette of the child element with the silhouettes of the other child elements.</p>
    <p></p>
    <li data-md>
     <p>An empty clipping path will completely clip away the element that had the <a class="property" data-link-type="propdesc" href="#propdef-clip-path" id="ref-for-propdef-clip-path①④">clip-path</a> property applied.</p>
    <p></p>
   </ul>
   <h3 class="heading settled" data-level="6.2" id="the-clip-rule"><span class="secno">6.2. </span><span class="content">Winding Rules: the <a class="property" data-link-type="propdesc" href="#propdef-clip-rule" id="ref-for-propdef-clip-rule①">clip-rule</a> property</span><a class="self-link" href="#the-clip-rule"></a></h3>
   <table class="def propdef" data-link-for-hint="clip-rule">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-clip-rule">clip-rule</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">nonzero <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> evenodd
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>nonzero
     <tr>
      <th>Applies to:
      <td>Applies to SVG <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#graphics-element" id="ref-for-graphics-element③">graphics elements</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-clip-rule" id="ref-for-propdef-clip-rule②">clip-rule</a> property indicates the algorithm which is to be used to determine whether a given point is inside a shape for a <a data-link-type="dfn" href="#clipping-region" id="ref-for-clipping-region①">clipping region</a> created with a <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#graphics-element" id="ref-for-graphics-element④">graphics element</a>. The definition of the algorithms and the <span class="property" id="ref-for-propdef-clip-rule③">clip-rule</span> values follows the definition of the <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#FillRuleProperty" id="ref-for-FillRuleProperty①">fill-rule</a> property. See section <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillProperties">“Fill Properties”</a> in SVG 1.1 <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a>.</p>
   <dl>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="clip-rule" data-dfn-type="value" data-export id="valdef-clip-rule-nonzero">nonzero</dfn>
    <dd data-md>
     <p>See description of <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#FillRuleProperty" id="ref-for-FillRuleProperty②">fill-rule</a> property <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a>.</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="clip-rule" data-dfn-type="value" data-export id="valdef-clip-rule-evenodd">evenodd</dfn>
    <dd data-md>
     <p>See description of <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#FillRuleProperty" id="ref-for-FillRuleProperty③">fill-rule</a> property <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a>.</p>
   </dl>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-clip-rule" id="ref-for-propdef-clip-rule④">clip-rule</a> property only applies to <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#graphics-element" id="ref-for-graphics-element⑤">graphics elements</a> that are contained within a <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath②⑨">clipPath</a> element.</p>
   <p class="note" role="note"><span>Note:</span> The <a class="property" data-link-type="propdesc" href="#propdef-clip-rule" id="ref-for-propdef-clip-rule⑤">clip-rule</a> property does not apply to <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-shapes-2/#typedef-basic-shape" id="ref-for-typedef-basic-shape④">&lt;basic-shape></a>s.</p>
   <div class="example" id="example-3153479a">
    <a class="self-link" href="#example-3153479a"></a> 
    <p>The following drawing illustrates the <a class="css" data-link-type="value" href="#valdef-clip-rule-nonzero" id="ref-for-valdef-clip-rule-nonzero">nonzero</a> rule:</p>
    <div class="figure">
     <p><img alt="Shape with nonzero rule." src="images/cliprule-nonzero.svg" style="border: solid black 1px;"> </p>
     <p class="caption">Three shapes from left to right: Star with 5 points drawn in one continuous, overlapping line; 2 clockwise drawn circles, one contains the other and both are subpaths of the same shape; 2 circles, one containing the other with the bigger one drawn in a clockwise direction and the smaller one in a counter-clockwise direction and both belonging to the same shape. Only the last shape has a "hole".</p>
    </div>
    <p>The following drawing illustrates the <a class="css" data-link-type="value" href="#valdef-clip-rule-evenodd" id="ref-for-valdef-clip-rule-evenodd">evenodd</a> rule:</p>
    <div class="figure">
     <p><img alt="Shape with even-odd rule." src="images/cliprule-evenodd.svg" style="border: solid black 1px;"> </p>
     <p class="caption">Three shapes from left to right: Star with 5 points drawn in one continuous, overlapping line; 2 clockwise drawn circles, one contains the other and both are subpaths of the same shape; 2 circles, one containing the other with the bigger one drawn in a clockwise direction and the smaller one in a counter-clockwise direction and both belonging to the same shape. All 3 shapes have a "hole".</p>
    </div>
   </div>
   <div class="example" id="example-4b844436">
    <a class="self-link" href="#example-4b844436"></a> The following fragment of code will cause an even-odd clipping rule to be applied to the clipping path because <a class="property" data-link-type="propdesc" href="#propdef-clip-rule" id="ref-for-propdef-clip-rule⑥">clip-rule</a> is specified on the <a data-link-type="element" href="https://svgwg.org/svg2-draft/paths.html#elementdef-path" id="ref-for-elementdef-path③">path</a> element that defines the clipping shape: 
<pre><code class="highlight"><c- p>&lt;</c-><c- f>g</c-> <c- e>clip-rule</c-><c- o>=</c-><c- s>"nonzero"</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>clipPath</c-> <c- e>id</c-><c- o>=</c-><c- s>"MyClip"</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>path</c-> <c- e>d</c-><c- o>=</c-><c- s>"..."</c-> <c- e>clip-rule</c-><c- o>=</c-><c- s>"evenodd"</c-> <c- p>/></c->
  <c- p>&lt;/</c-><c- f>clipPath</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>rect</c-> <c- e>clip-path</c-><c- o>=</c-><c- s>"url(#MyClip)"</c-> ... <c- p>/></c->
<c- p>&lt;/</c-><c- f>g</c-><c- p>></c->
</code></pre>
    <p>whereas the following fragment of code will <em>not</em> cause an evenodd clipping rule to be applied because the <a class="property" data-link-type="propdesc" href="#propdef-clip-rule" id="ref-for-propdef-clip-rule⑦">clip-rule</a> is specified on the referencing element, not on the object defining the clipping shape:</p>
<pre><code class="highlight"><c- p>&lt;</c-><c- f>g</c-> <c- e>clip-rule</c-><c- o>=</c-><c- s>"nonzero"</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>clipPath</c-> <c- e>id</c-><c- o>=</c-><c- s>"MyClip"</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>path</c-> <c- e>d</c-><c- o>=</c-><c- s>"..."</c-> <c- p>/></c->
  <c- p>&lt;/</c-><c- f>clipPath</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>rect</c-> <c- e>clip-path</c-><c- o>=</c-><c- s>"url(#MyClip)"</c-> <c- e>clip-rule</c-><c- o>=</c-><c- s>"evenodd"</c-> ... <c- p>/></c->
<c- p>&lt;/</c-><c- f>g</c-><c- p>></c->
</code></pre>
   </div>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-clip-rule" id="ref-for-propdef-clip-rule⑧">clip-rule</a> property is a <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermPresentationAttribute">presentation attribute</a> for SVG elements.</p>
   <h2 class="heading settled" data-level="7" id="positioned-masks"><span class="secno">7. </span><span class="content">Positioned Masks</span><a class="self-link" href="#positioned-masks"></a></h2>
   <h3 class="heading settled" data-level="7.1" id="the-mask-image"><span class="secno">7.1. </span><span class="content">Mask Image Source: the <a class="property" data-link-type="propdesc" href="#propdef-mask-image" id="ref-for-propdef-mask-image④">mask-image</a> property</span><a class="self-link" href="#the-mask-image"></a></h3>
   <table class="def propdef" data-link-for-hint="mask-image">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-image">mask-image</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="#typedef-mask-reference" id="ref-for-typedef-mask-reference">&lt;mask-reference></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma">#</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>none
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#container-element" id="ref-for-container-element②">container elements</a> excluding the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-defs" id="ref-for-elementdef-defs①">defs</a> element, all <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#graphics-element" id="ref-for-graphics-element⑥">graphics elements</a> and the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-use" id="ref-for-elementdef-use⑤">use</a> element
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>the keyword <span class="css">none</span>, a computed <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image">&lt;image></a>, or a computed <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#url-value" id="ref-for-url-value②">&lt;url></a>
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>This property sets the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="mask-layer-image">mask layer image</dfn> of an element. Where:</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-mask-reference">&lt;mask-reference></dfn> = none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image①">&lt;image></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a> <a class="production" data-link-type="type" href="#typedef-mask-source" id="ref-for-typedef-mask-source">&lt;mask-source></a></pre>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-mask-source">&lt;mask-source></dfn> = <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#url-value" id="ref-for-url-value③">&lt;url></a></pre>
   <dl>
    <dt data-md><dfn class="css" data-dfn-for="mask-image" data-dfn-type="value" data-export id="valdef-mask-image-url">&lt;url><a class="self-link" href="#valdef-mask-image-url"></a></dfn>
    <dd data-md>
     <p>A URL reference to a <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask③">mask</a> element (for example <span class="css">url(commonmasks.svg#mask)</span>) or to a CSS image.</p>
    <dt data-md>none
    <dd data-md>
     <p>A value of <span class="css">none</span> counts as a transparent black image layer.</p>
   </dl>
   <p>A computed value of other than <span class="css">none</span> results in the creation of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#stacking-context" id="ref-for-stacking-context②">stacking context</a> <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> the same way that CSS <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity②">opacity</a> <a data-link-type="biblio" href="#biblio-css3color">[CSS3COLOR]</a> does for values other than <span class="css">1</span>.</p>
   <p>A mask reference that is an empty image (zero width or zero height), that fails to download, is not a reference to an <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask④">mask</a> element, is non-existent, or that cannot be displayed (e.g. because it is not in a supported image format) still counts as an image layer of transparent black.</p>
   <p>See the section <a href="#MaskValues">“Mask processing”</a> for how to process a <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image①">mask layer image</a>.</p>
   <p class="note" role="note"><span>Note:</span> A value of <span class="css">none</span> in a list of <a class="production css" data-link-type="type" href="#typedef-mask-reference" id="ref-for-typedef-mask-reference①">&lt;mask-reference></a>s may influence the masking operation depending on the used compositing operator specified by <a class="property" data-link-type="propdesc" href="#propdef-mask-composite" id="ref-for-propdef-mask-composite">mask-composite</a>.</p>
   <p class="note" role="note"><span>Note:</span> A <a class="production css" data-link-type="type" href="#typedef-mask-source" id="ref-for-typedef-mask-source①">&lt;mask-source></a> counts as mask layer and can be combined in a repeatable <a class="production css" data-link-type="type" href="#typedef-mask-reference" id="ref-for-typedef-mask-reference②">&lt;mask-reference></a> list with <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image②">&lt;image></a> or further <span class="production" id="ref-for-typedef-mask-source②">&lt;mask-source></span> list items.</p>
   <p class="note" role="note"><span>Note:</span> An element can also be masked with <a class="property" data-link-type="propdesc" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source③">mask-border-source</a>. See <span class="property" id="ref-for-propdef-mask-border-source④">mask-border-source</span> for the interaction of that property with <a class="property" data-link-type="propdesc" href="#propdef-mask-image" id="ref-for-propdef-mask-image⑤">mask-image</a>.</p>
   <div class="example" id="example-4c7f99bf">
    <a class="self-link" href="#example-4c7f99bf"></a> Examples for mask references: 
<pre><code class="highlight"><c- f>body </c-><c- p>{</c-> <c- k>mask-image</c-><c- p>:</c-> <c- nf>linear-gradient</c-><c- p>(</c->black <c- m>0</c-><c- l>%</c-><c- p>,</c-> transparent <c- m>100</c-><c- l>%</c-><c- p>)</c-> <c- p>}</c->
<c- f>p </c-><c- p>{</c-> <c- k>mask-image</c-><c- p>:</c-> none <c- p>}</c->
<c- f>div </c-><c- p>{</c-> <c- k>mask-image</c-><c- p>:</c-> <c- nf>url</c-><c- p>(</c-><c- s>resources.svg#mask2</c-><c- p>)</c-> <c- p>}</c->
</code></pre>
   </div>
   <p>See the section <a href="#layering">“Layering multiple mask layer images”</a> for how <a class="property" data-link-type="propdesc" href="#propdef-mask-image" id="ref-for-propdef-mask-image⑥">mask-image</a> interacts with other comma-separated mask properties to form each mask layer.</p>
   <h3 class="heading settled" data-level="7.2" id="the-mask-mode"><span class="secno">7.2. </span><span class="content">Mask Image Interpretation: the <a class="property" data-link-type="propdesc" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode">mask-mode</a> property</span><a class="self-link" href="#the-mask-mode"></a></h3>
   <table class="def propdef" data-link-for-hint="mask-mode">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-mode">mask-mode</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="#typedef-masking-mode" id="ref-for-typedef-masking-mode">&lt;masking-mode></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma①">#</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>match-source
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#container-element" id="ref-for-container-element③">container elements</a> excluding the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-defs" id="ref-for-elementdef-defs②">defs</a> element, all <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#graphics-element" id="ref-for-graphics-element⑦">graphics elements</a> and the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-use" id="ref-for-elementdef-use⑥">use</a> element
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode①">mask-mode</a> property indicates whether the <a class="production css" data-link-type="type" href="#typedef-mask-reference" id="ref-for-typedef-mask-reference③">&lt;mask-reference></a> is treated as luminance mask or alpha mask. (See <a href="#MaskValues">Mask processing</a>.)</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-masking-mode">&lt;masking-mode></dfn> = alpha <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧">|</a> luminance <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨">|</a> match-source</pre>
   <p>Values have the following meanings:</p>
   <dl>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-mode" data-dfn-type="value" data-export id="valdef-mask-mode-alpha">alpha</dfn>
    <dd data-md>
     <p>A value of <a class="css" data-link-type="maybe" href="#valdef-mask-mode-alpha" id="ref-for-valdef-mask-mode-alpha">alpha</a> indicates that the alpha values of the <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image②">mask layer image</a> should be used as the mask values. See <a href="#MaskValues">Calculating mask values</a>.</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-mode" data-dfn-type="value" data-export id="valdef-mask-mode-luminance">luminance</dfn>
    <dd data-md>
     <p>A value of <a class="css" data-link-type="maybe" href="#valdef-mask-mode-luminance" id="ref-for-valdef-mask-mode-luminance">luminance</a> indicates that the luminance values of the <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image③">mask layer image</a> should be used as the mask values. See <a href="#MaskValues">Calculating mask values</a>.</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-mode" data-dfn-type="value" data-export id="valdef-mask-mode-match-source">match-source</dfn>
    <dd data-md>
     <p>If the <a class="production css" data-link-type="type" href="#typedef-mask-reference" id="ref-for-typedef-mask-reference④">&lt;mask-reference></a> of the <a class="property" data-link-type="propdesc" href="#propdef-mask-image" id="ref-for-propdef-mask-image⑦">mask-image</a> property is of type <a class="production css" data-link-type="type" href="#typedef-mask-source" id="ref-for-typedef-mask-source③">&lt;mask-source></a> the value specified by the referenced <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask⑤">mask</a> element’s <a class="property" data-link-type="propdesc" href="#propdef-mask-type" id="ref-for-propdef-mask-type">mask-type</a> property must be used.</p>
     <p>If the <a class="production css" data-link-type="type" href="#typedef-mask-reference" id="ref-for-typedef-mask-reference⑤">&lt;mask-reference></a> of the <a class="property" data-link-type="propdesc" href="#propdef-mask-image" id="ref-for-propdef-mask-image⑧">mask-image</a> property is of type <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image③">&lt;image></a> the alpha values of the <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image④">mask layer image</a> should be used as the mask values.</p>
   </dl>
   <div class="example" id="example-ec098273">
    <a class="self-link" href="#example-ec098273"></a> In the following example, the <a class="property" data-link-type="propdesc" href="#propdef-mask-type" id="ref-for-propdef-mask-type①">mask-type</a> property sets the mask type value for the <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask⑥">mask</a> element to <a class="css" data-link-type="maybe" href="#valdef-mask-type-alpha" id="ref-for-valdef-mask-type-alpha">alpha</a>. The <a class="property" data-link-type="propdesc" href="#propdef-mask-image" id="ref-for-propdef-mask-image⑨">mask-image</a> property has a reference to this <span id="ref-for-elementdef-mask⑦">mask</span> element and the <a class="property" data-link-type="propdesc" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode②">mask-mode</a> property has a value of <a class="css" data-link-type="maybe" href="#valdef-mask-mode-luminance" id="ref-for-valdef-mask-mode-luminance①">luminance</a>. The <span class="property" id="ref-for-propdef-mask-mode③">mask-mode</span> property will override the definition of <span class="property" id="ref-for-propdef-mask-type②">mask-type</span> to <a class="css" data-link-type="maybe" href="#valdef-mask-type-luminance" id="ref-for-valdef-mask-type-luminance">luminance</a>. 
    <p>The <a class="property" data-link-type="propdesc" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode④">mask-mode</a> property must not affect the masking mode of <a class="property" data-link-type="propdesc" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source⑤">mask-border-source</a>.</p>
<pre><code class="highlight"><c- p>&lt;</c-><c- f>mask</c-> <c- e>id</c-><c- o>=</c-><c- s>"SVGMask"</c-> <c- e>mask-type</c-><c- o>=</c-><c- s>"alpha"</c-> <c- e>maskContentUnits</c-><c- o>=</c-><c- s>"objectBoundingBox"</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>radialGradient</c-> <c- e>id</c-><c- o>=</c-><c- s>"radialFill"</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>stop</c-> <c- e>stop-color</c-><c- o>=</c-><c- s>"white"</c-> <c- e>offset</c-><c- o>=</c-><c- s>"0"</c-><c- p>/></c->
    <c- p>&lt;</c-><c- f>stop</c-> <c- e>stop-color</c-><c- o>=</c-><c- s>"black"</c-> <c- e>offset</c-><c- o>=</c-><c- s>"1"</c-><c- p>/></c->
  <c- p>&lt;/</c-><c- f>radialGradient</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>circle</c-> <c- e>fill</c-><c- o>=</c-><c- s>"url(#radialFill)"</c-> <c- e>cx</c-><c- o>=</c-><c- s>"0.5"</c-> <c- e>cy</c-><c- o>=</c-><c- s>"0.5"</c-> <c- e>r</c-><c- o>=</c-><c- s>"0.5"</c-><c- p>/></c->
<c- p>&lt;/</c-><c- f>mask</c-><c- p>></c->

<c- p>&lt;</c-><c- f>style</c-><c- p>></c->
  <c- f>rect</c-> <c- p>{</c->
    <c- k>mask-image</c-><c- p>:</c-> url<c- p>(</c-><c- sx>#SVGMask</c-><c- p>);</c->
    <c- k>mask-mode</c-><c- p>:</c-> <c- kc>luminance</c-><c- p>;</c->
  <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->

<c- p>&lt;</c-><c- f>rect</c-> <c- e>width</c-><c- o>=</c-><c- s>"200"</c-> <c- e>height</c-><c- o>=</c-><c- s>"200"</c-> <c- e>fill</c-><c- o>=</c-><c- s>"green"</c-><c- p>/></c->
</code></pre>
   </div>
   <p>See the section <a href="#layering">“Layering multiple mask layer images”</a> for how <a class="property" data-link-type="propdesc" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode⑤">mask-mode</a> interacts with other comma-separated mask properties to form each mask layer.</p>
   <h3 class="heading settled" data-level="7.3" id="the-mask-repeat"><span class="secno">7.3. </span><span class="content">Tiling Mask Images: the <a class="property" data-link-type="propdesc" href="#propdef-mask-repeat" id="ref-for-propdef-mask-repeat">mask-repeat</a> property</span><a class="self-link" href="#the-mask-repeat"></a></h3>
   <table class="def propdef" data-link-for-hint="mask-repeat">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-repeat">mask-repeat</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-backgrounds-3/#typedef-repeat-style" id="ref-for-typedef-repeat-style">&lt;repeat-style></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma②">#</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>repeat
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#container-element" id="ref-for-container-element④">container elements</a> excluding the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-defs" id="ref-for-elementdef-defs③">defs</a> element, all <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#graphics-element" id="ref-for-graphics-element⑧">graphics elements</a> and the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-use" id="ref-for-elementdef-use⑦">use</a> element
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>Consists of: two keywords, one per dimension
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>Specifies how <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image⑤">mask layer images</a> are tiled after they have been <a href="#the-mask-size">sized</a> and <a href="#the-mask-position">positioned</a>.</p>
   <p>See <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-repeat" id="ref-for-propdef-background-repeat">background-repeat</a> property <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a> for the definitions of the property values.</p>
   <div class="example" id="example-6b3f7f82">
    <a class="self-link" href="#example-6b3f7f82"></a> 
<pre><code class="highlight"><c- f>body </c-><c- p>{</c->
    <c- k>background-color</c-><c- p>:</c-> blue<c- p>;</c->
    <c- k>mask-image</c-><c- p>:</c-> <c- nf>url</c-><c- p>(</c-><c- s>dot-mask.png</c-><c- p>)</c-> luminance<c- p>;</c->
    <c- k>mask-repeat</c-><c- p>:</c-> space<c- p>;</c->
<c- p>}</c->
</code></pre>
    <div class="figure">
     <p><img alt="Image of an element with a dotted mask." src="images/mask-repeat.svg" style="border: solid black 1px;" width="240"> </p>
     <p class="caption">The effect of <span class="css">space</span>: the <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image⑥">mask layer image</a> of a dot is tiled to cover the whole <a data-link-type="dfn" href="#mask-painting-area" id="ref-for-mask-painting-area①">mask painting area</a> and the <span id="ref-for-mask-layer-image⑦">mask layer image</span>s are equally spaced.</p>
    </div>
   </div>
   <p>See the section <a href="#layering">“Layering multiple mask layer images”</a> for how <a class="property" data-link-type="propdesc" href="#propdef-mask-repeat" id="ref-for-propdef-mask-repeat①">mask-repeat</a> interacts with other comma-separated mask properties to form each mask layer.</p>
   <h3 class="heading settled" data-level="7.4" id="the-mask-position"><span class="secno">7.4. </span><span class="content">Positioning Mask Images: the <a class="property" data-link-type="propdesc" href="#propdef-mask-position" id="ref-for-propdef-mask-position①">mask-position</a> property</span><a class="self-link" href="#the-mask-position"></a></h3>
   <table class="def propdef" data-link-for-hint="mask-position">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-position">mask-position</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-position" id="ref-for-typedef-position">&lt;position></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma③">#</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>0% 0%
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#container-element" id="ref-for-container-element⑤">container elements</a> excluding the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-defs" id="ref-for-elementdef-defs④">defs</a> element, all <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#graphics-element" id="ref-for-graphics-element⑨">graphics elements</a> and the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-use" id="ref-for-elementdef-use⑧">use</a> element
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>refer to size of <a data-link-type="dfn" href="#mask-painting-area" id="ref-for-mask-painting-area②">mask painting area</a> <em>minus</em> size of <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image⑧">mask layer image</a>; see text <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position" id="ref-for-propdef-background-position">background-position</a> <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>Consisting of: two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>), otherwise as a percentage.
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>repeatable list
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>See the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position" id="ref-for-propdef-background-position①">background-position</a> property <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a> for the definitions of the property values.</p>
   <div class="example" id="example-80025e44">
    <a class="self-link" href="#example-80025e44"></a> In the example below, the (single) image is placed in the lower-right corner of the viewport. 
<pre><code class="highlight"><c- f>body </c-><c- p>{</c->
    <c- k>mask-image</c-><c- p>:</c-> <c- nf>url</c-><c- p>(</c-><c- s>"logo.png"</c-><c- p>);</c->
    <c- k>mask-position</c-><c- p>:</c-> <c- m>100</c-><c- l>%</c-> <c- m>100</c-><c- l>%</c-><c- p>;</c->
    <c- k>mask-repeat</c-><c- p>:</c-> no-repeat<c- p>;</c->
<c- p>}</c->
</code></pre>
   </div>
   <div class="example" id="example-dc3e5c49">
    <a class="self-link" href="#example-dc3e5c49"></a> Mask positions can also be relative to other corners than the top left. E.g., the following puts the background image 10px from the bottom and 3em from the right:
    <p></p>
<pre><code class="highlight">mask-position: right 3em bottom 10px</code></pre>
   </div>
   <p>See the section <a href="#layering">“Layering multiple mask layer images”</a> for how <a class="property" data-link-type="propdesc" href="#propdef-mask-position" id="ref-for-propdef-mask-position②">mask-position</a> interacts with other comma-separated mask properties to form each mask layer.</p>
   <h3 class="heading settled" data-level="7.5" id="the-mask-clip"><span class="secno">7.5. </span><span class="content">Masking Area: the <a class="property" data-link-type="propdesc" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip">mask-clip</a> property</span><a class="self-link" href="#the-mask-clip"></a></h3>
   <table class="def propdef" data-link-for-hint="mask-clip">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-clip">mask-clip</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">[ <a class="production css" data-link-type="type" href="#typedef-geometry-box" id="ref-for-typedef-geometry-box②">&lt;geometry-box></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⓪">|</a> no-clip ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma④">#</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>border-box
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#container-element" id="ref-for-container-element⑥">container elements</a> excluding the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-defs" id="ref-for-elementdef-defs⑤">defs</a> element, all <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#graphics-element" id="ref-for-graphics-element①⓪">graphics elements</a> and the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-use" id="ref-for-elementdef-use⑨">use</a> element
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>For <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image⑨">mask layer images</a> that do not reference a <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask⑧">mask</a> element, <a class="property" data-link-type="propdesc" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip①">mask-clip</a> determines the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="mask-painting-area">mask painting area</dfn>, which determines the area that is affected by the mask. The painted content of an element must be restricted to this area.</p>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip②">mask-clip</a> property has no affect on a <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image①⓪">mask layer image</a> that references a <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask⑨">mask</a> element. The <a data-link-type="element-attr" href="#element-attrdef-mask-x" id="ref-for-element-attrdef-mask-x">x</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-y" id="ref-for-element-attrdef-mask-y">y</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-width" id="ref-for-element-attrdef-mask-width">width</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-height" id="ref-for-element-attrdef-mask-height">height</a> and <a data-link-type="element-attr" href="#element-attrdef-mask-maskunits" id="ref-for-element-attrdef-mask-maskunits">maskUnits</a> attributes on the <span id="ref-for-elementdef-mask①⓪">mask</span> element determine the <a data-link-type="dfn" href="#mask-painting-area" id="ref-for-mask-painting-area③">mask painting area</a> for mask references.</p>
   <p>Values have the following meanings:</p>
   <dl>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-clip" data-dfn-type="value" data-export id="valdef-mask-clip-content-box">content-box</dfn>
    <dd data-md>
     <p>The painted content is restricted to (clipped to) the <em>content box</em>.</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-clip" data-dfn-type="value" data-export id="valdef-mask-clip-padding-box">padding-box</dfn>
    <dd data-md>
     <p>The painted content is restricted to (clipped to) the <em>padding box</em>.</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-clip" data-dfn-type="value" data-export id="valdef-mask-clip-border-box">border-box</dfn>
    <dd data-md>
     <p>The painted content is restricted to (clipped to) the <em>border box</em>.</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-clip" data-dfn-type="value" data-export id="valdef-mask-clip-fill-box">fill-box</dfn>
    <dd data-md>
     <p>The painted content is restricted to (clipped to) the <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/coords.html#TermObjectBoundingBox" id="ref-for-TermObjectBoundingBox②">object bounding box</a>.</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-clip" data-dfn-type="value" data-export id="valdef-mask-clip-stroke-box">stroke-box</dfn>
    <dd data-md>
     <p>The painted content is restricted to (clipped to) the <a data-link-type="dfn" href="#stroke-bounding-box" id="ref-for-stroke-bounding-box①">stroke bounding box</a>.</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-clip" data-dfn-type="value" data-export id="valdef-mask-clip-view-box">view-box</dfn>
    <p></p>
    <dd data-md>
     <p>Uses the nearest <a href="https://www.w3.org/TR/SVG11/intro.html#TermSVGViewport">SVG viewport</a> as reference box.</p>
     <p>If a <a data-link-type="element-attr" href="https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute" id="ref-for-ViewBoxAttribute③">viewBox</a> attribute is specified for the <a href="https://www.w3.org/TR/SVG11/intro.html#TermSVGViewport">SVG viewport</a> creating element:</p>
     <ul>
      <li data-md>
       <p>The reference box is positioned at the origin of the coordinate system established by the <a data-link-type="element-attr" href="https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute" id="ref-for-ViewBoxAttribute④">viewBox</a> attribute.</p>
      <li data-md>
       <p>The dimension of the reference box is set to the <em>width</em> and <em>height</em> values of the <a data-link-type="element-attr" href="https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute" id="ref-for-ViewBoxAttribute⑤">viewBox</a> attribute.</p>
     </ul>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-clip" data-dfn-type="value" data-export id="valdef-mask-clip-no-clip">no-clip</dfn>
    <dd data-md>
     <p>The painted content is not restricted (not clipped).</p>
   </dl>
   <p>For SVG elements without associated CSS layout box, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value②">used value</a>s for <a class="css" data-link-type="maybe" href="#valdef-mask-clip-content-box" id="ref-for-valdef-mask-clip-content-box②">content-box</a> and <a class="css" data-link-type="maybe" href="#valdef-mask-clip-padding-box" id="ref-for-valdef-mask-clip-padding-box①">padding-box</a> compute to <a class="css" data-link-type="maybe" href="#valdef-mask-clip-fill-box" id="ref-for-valdef-mask-clip-fill-box">fill-box</a> and for <a class="css" data-link-type="maybe" href="#valdef-mask-clip-border-box" id="ref-for-valdef-mask-clip-border-box③">border-box</a> and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-masking-1/#valuedef-margin-box0" id="ref-for-valuedef-margin-box0①">margin-box</a> compute to <a class="css" data-link-type="maybe" href="#valdef-mask-clip-stroke-box" id="ref-for-valdef-mask-clip-stroke-box">stroke-box</a>.</p>
   <p>For elements with associated CSS layout box, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value③">used value</a>s for <a class="css" data-link-type="maybe" href="#valdef-mask-clip-fill-box" id="ref-for-valdef-mask-clip-fill-box①">fill-box</a> compute to <a class="css" data-link-type="maybe" href="#valdef-mask-clip-content-box" id="ref-for-valdef-mask-clip-content-box③">content-box</a> and for <a class="css" data-link-type="maybe" href="#valdef-mask-clip-stroke-box" id="ref-for-valdef-mask-clip-stroke-box①">stroke-box</a> and <a class="css" data-link-type="maybe" href="#valdef-mask-clip-view-box" id="ref-for-valdef-mask-clip-view-box">view-box</a> compute to <a class="css" data-link-type="maybe" href="#valdef-mask-clip-border-box" id="ref-for-valdef-mask-clip-border-box④">border-box</a>.</p>
   <p>See the section <a href="#layering">“Layering multiple mask layer images”</a> for how <a class="property" data-link-type="propdesc" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip③">mask-clip</a> interacts with other comma-separated mask properties to form each mask layer.</p>
   <h3 class="heading settled" data-level="7.6" id="the-mask-origin"><span class="secno">7.6. </span><span class="content">Positioning Area: the <a class="property" data-link-type="propdesc" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin">mask-origin</a> property</span><a class="self-link" href="#the-mask-origin"></a></h3>
   <table class="def propdef" data-link-for-hint="mask-origin">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-origin">mask-origin</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="#typedef-geometry-box" id="ref-for-typedef-geometry-box③">&lt;geometry-box></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma⑤">#</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>border-box
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#container-element" id="ref-for-container-element⑦">container elements</a> excluding the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-defs" id="ref-for-elementdef-defs⑥">defs</a> element, all <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#graphics-element" id="ref-for-graphics-element①①">graphics elements</a> and the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-use" id="ref-for-elementdef-use①⓪">use</a> element
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>For elements rendered as a single box, specifies the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="mask-positioning-area">mask positioning area</dfn>. For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages) specifies which boxes <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-break-4/#propdef-box-decoration-break" id="ref-for-propdef-box-decoration-break">box-decoration-break</a> operates on to determine the mask positioning area.</p>
   <div>
    <dl>
     <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-origin" data-dfn-type="value" data-export id="valdef-mask-origin-content-box">content-box</dfn>
     <dd data-md>
      <p>The position is relative to the <em>content box</em>.</p>
     <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-origin" data-dfn-type="value" data-export id="valdef-mask-origin-padding-box">padding-box</dfn>
     <dd data-md>
      <p>The position is relative to the <em>padding box</em>. (For single boxes <span class="css">0 0</span> is the upper left corner of the padding edge, <span class="css">100% 100%</span> is the lower right corner.)</p>
     <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-origin" data-dfn-type="value" data-export id="valdef-mask-origin-border-box">border-box</dfn>
     <dd data-md>
      <p>The position is relative to the <em>border box</em>.</p>
     <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-origin" data-dfn-type="value" data-export id="valdef-mask-origin-fill-box">fill-box</dfn>
     <dd data-md>
      <p>The position is relative to the <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/coords.html#TermObjectBoundingBox" id="ref-for-TermObjectBoundingBox③">object bounding box</a>.</p>
     <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-origin" data-dfn-type="value" data-export id="valdef-mask-origin-stroke-box">stroke-box</dfn>
     <dd data-md>
      <p>The position is relative to the <a data-link-type="dfn" href="#stroke-bounding-box" id="ref-for-stroke-bounding-box②">stroke bounding box</a>.</p>
     <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-origin" data-dfn-type="value" data-export id="valdef-mask-origin-view-box">view-box</dfn>
     <dd data-md>
      <p>Uses the nearest <a href="https://www.w3.org/TR/SVG11/intro.html#TermSVGViewport">SVG viewport</a> as reference box.</p>
      <p>If a <a data-link-type="element-attr" href="https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute" id="ref-for-ViewBoxAttribute⑥">viewBox</a> attribute is specified for the <a href="https://www.w3.org/TR/SVG11/intro.html#TermSVGViewport">SVG viewport</a> creating element:</p>
      <ul>
       <li data-md>
        <p>The reference box is positioned at the origin of the coordinate system established by the <a data-link-type="element-attr" href="https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute" id="ref-for-ViewBoxAttribute⑦">viewBox</a> attribute.</p>
       <li data-md>
        <p>The dimension of the reference box is set to the <em>width</em> and <em>height</em> values of the <a data-link-type="element-attr" href="https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute" id="ref-for-ViewBoxAttribute⑧">viewBox</a> attribute.</p>
      </ul>
    </dl>
   </div>
   <p>For SVG elements without associated CSS layout box, the values <a class="css" data-link-type="maybe" href="#valdef-mask-origin-content-box" id="ref-for-valdef-mask-origin-content-box">content-box</a>, <a class="css" data-link-type="maybe" href="#valdef-mask-origin-padding-box" id="ref-for-valdef-mask-origin-padding-box">padding-box</a> and <a class="css" data-link-type="maybe" href="#valdef-mask-origin-border-box" id="ref-for-valdef-mask-origin-border-box">border-box</a> compute to <a class="css" data-link-type="maybe" href="#valdef-mask-origin-fill-box" id="ref-for-valdef-mask-origin-fill-box">fill-box</a>.</p>
   <p>For elements with associated CSS layout box, the values <a class="css" data-link-type="maybe" href="#valdef-mask-origin-fill-box" id="ref-for-valdef-mask-origin-fill-box①">fill-box</a>, <a class="css" data-link-type="maybe" href="#valdef-mask-origin-stroke-box" id="ref-for-valdef-mask-origin-stroke-box">stroke-box</a> and <a class="css" data-link-type="maybe" href="#valdef-mask-origin-view-box" id="ref-for-valdef-mask-origin-view-box">view-box</a> compute to the initial value of <a class="property" data-link-type="propdesc" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin①">mask-origin</a>.</p>
   <p class="note" role="note"><span>Note:</span> The <a class="property" data-link-type="propdesc" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin②">mask-origin</a> property is similar to the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-origin" id="ref-for-propdef-background-origin">background-origin</a> property <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a>, but it has a different set of values, and a different initial value.</p>
   <p class="note" role="note"><span>Note:</span> If <a class="property" data-link-type="propdesc" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip④">mask-clip</a> is <a class="css" data-link-type="maybe" href="#valdef-mask-origin-padding-box" id="ref-for-valdef-mask-origin-padding-box①">padding-box</a>, <a class="property" data-link-type="propdesc" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin③">mask-origin</a> is <a class="css" data-link-type="maybe" href="#valdef-mask-origin-border-box" id="ref-for-valdef-mask-origin-border-box①">border-box</a>, <a class="property" data-link-type="propdesc" href="#propdef-mask-position" id="ref-for-propdef-mask-position③">mask-position</a> is <span class="css">top left</span> (the initial value), and the element has a non-zero border, then the top and left of the <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image①①">mask layer image</a> will be clipped.</p>
   <p>See the section <a href="#layering">“Layering multiple mask layer images”</a> for how <a class="property" data-link-type="propdesc" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin④">mask-origin</a> interacts with other comma-separated mask properties to form each mask layer.</p>
   <h3 class="heading settled" data-level="7.7" id="the-mask-size"><span class="secno">7.7. </span><span class="content">Sizing Mask Images: the <a class="property" data-link-type="propdesc" href="#propdef-mask-size" id="ref-for-propdef-mask-size①">mask-size</a> property</span><a class="self-link" href="#the-mask-size"></a></h3>
   <table class="def propdef" data-link-for-hint="mask-size">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-size">mask-size</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-backgrounds-3/#typedef-bg-size" id="ref-for-typedef-bg-size">&lt;bg-size></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma⑥">#</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#container-element" id="ref-for-container-element⑧">container elements</a> excluding the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-defs" id="ref-for-elementdef-defs⑦">defs</a> element, all <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#graphics-element" id="ref-for-graphics-element①②">graphics elements</a> and the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-use" id="ref-for-elementdef-use①①">use</a> element
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified, but with lengths made absolute
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>repeatable list
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>Specifies the size of the <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image①②">mask layer images</a>.</p>
   <p>See <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-size" id="ref-for-propdef-background-size">background-size</a> property <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a> for the definitions of the property values.</p>
   <p>See the section <a href="#layering">“Layering multiple mask layer images”</a> for how <a class="property" data-link-type="propdesc" href="#propdef-mask-size" id="ref-for-propdef-mask-size②">mask-size</a> interacts with other comma-separated mask properties to form each mask layer.</p>
   <h3 class="heading settled" data-level="7.8" id="the-mask-composite"><span class="secno">7.8. </span><span class="content">Compositing mask layers: the <a class="property" data-link-type="propdesc" href="#propdef-mask-composite" id="ref-for-propdef-mask-composite①">mask-composite</a> property</span><a class="self-link" href="#the-mask-composite"></a></h3>
   <table class="def propdef" data-link-for-hint="mask-composite">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-composite">mask-composite</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="#typedef-compositing-operator" id="ref-for-typedef-compositing-operator">&lt;compositing-operator></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma⑦">#</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>add
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#container-element" id="ref-for-container-element⑨">container elements</a> without the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-defs" id="ref-for-elementdef-defs⑧">defs</a> element and all <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#graphics-element" id="ref-for-graphics-element①③">graphics elements</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete
     <tr>
      <th>Media:
      <td>visual
   </table>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-compositing-operator">&lt;compositing-operator></dfn> = add <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①①">|</a> subtract <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①②">|</a> intersect <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①③">|</a> exclude</pre>
   <p>Each keyword represents a Porter-Duff compositing operator <a data-link-type="biblio" href="#biblio-compositing-1">[COMPOSITING-1]</a> which defines the compositing operation used on the current mask layer with the mask layers below it.</p>
   <p>In the following, the current mask layer is referred to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="source">source</dfn>, all mask layers below it (with the corresponding compositing operators applied) are referred to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="destination">destination</dfn>.</p>
   <div>
    <dl>
     <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-composite" data-dfn-type="value" data-export id="valdef-mask-composite-add">add</dfn>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#source" id="ref-for-source">source</a> is placed over the <a data-link-type="dfn" href="#destination" id="ref-for-destination">destination</a>. (See Porter-Duff compositing operator <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcover">source over</a> for more details.)</p>
     <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-composite" data-dfn-type="value" data-export id="valdef-mask-composite-subtract">subtract</dfn>
     <dd data-md>
      <p>The <a data-link-type="dfn" href="#source" id="ref-for-source①">source</a> is placed, where it falls outside of the <a data-link-type="dfn" href="#destination" id="ref-for-destination①">destination</a>. (See Porter-Duff compositing operator <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcout">source out</a> for more details.)</p>
     <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-composite" data-dfn-type="value" data-export id="valdef-mask-composite-intersect">intersect</dfn>
     <dd data-md>
      <p>The parts of <a data-link-type="dfn" href="#source" id="ref-for-source②">source</a> that overlap the <a data-link-type="dfn" href="#destination" id="ref-for-destination②">destination</a>, replace the <span id="ref-for-destination③">destination</span>. (See Porter-Duff compositing operator <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcin">source in</a> .)</p>
     <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-composite" data-dfn-type="value" data-export id="valdef-mask-composite-exclude">exclude</dfn>
     <dd data-md>
      <p>The non-overlapping regions of <a data-link-type="dfn" href="#source" id="ref-for-source③">source</a> and <a data-link-type="dfn" href="#destination" id="ref-for-destination④">destination</a> are combined. (See Porter-Duff compositing operator <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_xor">XOR</a>.)</p>
    </dl>
   </div>
   <p>If there is no further mask layer, the compositing operator must be ignored. Mask layers must not composite with the element’s content or the content behind the element, instead they must act as if they are rendered into an isolated group.</p>
   <p>All mask layers below the current mask layer must be composited before applying the compositing operation for the current mask layer.</p>
   <div class="example" id="example-065f6c44">
    <a class="self-link" href="#example-065f6c44"></a> This example uses two <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image①③">mask layer images</a>: <var>circle.svg</var> and <var>rect.svg</var>. 
    <div class="figure"> <img alt="Example of source-over compositing of mask layers" height="240" src="images/mask-source-destination.svg" width="440"> </div>
    <p>Both <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image①④">mask layer images</a> are references with the <a class="property" data-link-type="propdesc" href="#propdef-mask-image" id="ref-for-propdef-mask-image①⓪">mask-image</a> property:</p>
<pre><code class="highlight">mask-image: circle.svg, rect.svg;
</code></pre>
    <p>The mask layer with <var>rect.svg</var> is below the mask layer with <var>circle.svg</var>. That means <var>circle.svg</var> is closer to the user than <var>rect.svg</var>.</p>
    <p>With the property <a class="property" data-link-type="propdesc" href="#propdef-mask-composite" id="ref-for-propdef-mask-composite②">mask-composite</a> the author may choose different ways to combine multiple mask layers.</p>
    <ul>
     <li data-md>
      <p><a class="css" data-link-type="maybe" href="#valdef-mask-composite-add" id="ref-for-valdef-mask-composite-add">add</a> paints the <var>circle.svg</var> on top of <var>rect.svg</var>. The behavior is described by the compositing operator <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcover">source over</a>.</p>
      <p></p>
<pre><code class="highlight">mask-composite: add;
</code></pre>
      <div class="figure"> <img alt="Example of source-over compositing of mask layers" height="220" src="images/mask-composite-add.svg" width="220"> </div>
     <li data-md>
      <p><a class="css" data-link-type="maybe" href="#valdef-mask-composite-subtract" id="ref-for-valdef-mask-composite-subtract">subtract</a> paints portions of <var>circle.svg</var> that do not overlap <var>rect.svg</var>. The behavior is described by the compositing operator <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcout">source out</a>.</p>
      <p></p>
<pre><code class="highlight">mask-composite: subtract;
</code></pre>
      <div class="figure"> <img alt="Example of source-over compositing of mask layers" height="220" src="images/mask-composite-subtract.svg" width="220"> </div>
     <li data-md>
      <p><a class="css" data-link-type="maybe" href="#valdef-mask-composite-intersect" id="ref-for-valdef-mask-composite-intersect">intersect</a> paints portions of <var>circle.svg</var> that overlap <var>rect.svg</var>. The behavior is described by the compositing operator <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcin">source in</a>.</p>
      <p></p>
<pre><code class="highlight">mask-composite: intersect;
</code></pre>
      <div class="figure"> <img alt="Example of source-over compositing of mask layers" height="220" src="images/mask-composite-intersect.svg" width="220"> </div>
     <li data-md>
      <p><a class="css" data-link-type="maybe" href="#valdef-mask-composite-exclude" id="ref-for-valdef-mask-composite-exclude">exclude</a> paints portions of <var>circle.svg</var> and <var>rect.svg</var> that do not overlap. The behavior is described by the compositing operator <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_xor">XOR</a>.</p>
      <p></p>
<pre><code class="highlight">mask-composite: exclude;
</code></pre>
      <div class="figure"> <img alt="Example of source-over compositing of mask layers" height="220" src="images/mask-composite-exclude.svg" width="220"> </div>
    </ul>
   </div>
   <div class="example" id="example-9bff19b4">
    <a class="self-link" href="#example-9bff19b4"></a> The following example specifies two mask layers and two compositing operators. 
<pre><code class="highlight">mask-image: rect.svg, circle.svg;
mask-composite: add, exclude;
</code></pre>
    <p><var>rect.svg</var> and <var>circle.svg</var> make use of the <a class="css" data-link-type="maybe" href="#valdef-mask-composite-add" id="ref-for-valdef-mask-composite-add①">add</a> compositing operator. There is no further mask layer to use <a class="css" data-link-type="maybe" href="#valdef-mask-composite-exclude" id="ref-for-valdef-mask-composite-exclude①">exclude</a> and therefore, <span class="css" id="ref-for-valdef-mask-composite-exclude②">exclude</span> is ignored.</p>
   </div>
   <div class="example" id="example-2266eac2">
    <a class="self-link" href="#example-2266eac2"></a> This is an example of 3 mask layers with different compositing operators. 
<pre><code class="highlight">mask-image: trapeze.svg, circle.svg, rect.svg;
mask-composite: subtract, add;
</code></pre>
    <p>First, <var>circle.svg</var> is “added” to <var>rect.svg</var>. In a second step, only portions of <var>trapeze.svg</var> that are not overlapping the compositing result of the previous two layers is visible.</p>
    <div class="figure"> <img alt="Example of source-over compositing of mask layers" height="240" src="images/mask-composite-subtract-add.svg" width="440"> </div>
   </div>
   <p>See the section <a href="#layering">“Layering multiple mask layer images”</a> for how <a class="property" data-link-type="propdesc" href="#propdef-mask-composite" id="ref-for-propdef-mask-composite③">mask-composite</a> interacts with other comma-separated mask properties to form each mask layer.</p>
   <h3 class="heading settled" data-level="7.9" id="the-mask"><span class="secno">7.9. </span><span class="content">Mask Shorthand: the <a class="property" data-link-type="propdesc" href="#propdef-mask" id="ref-for-propdef-mask②">mask</a> property</span><a class="self-link" href="#the-mask"></a></h3>
   <table class="def propdef" data-link-for-hint="mask">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask">mask</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="#typedef-mask-layer" id="ref-for-typedef-mask-layer">&lt;mask-layer></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma⑧">#</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>see individual properties
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#container-element" id="ref-for-container-element①⓪">container elements</a> excluding the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-defs" id="ref-for-elementdef-defs⑨">defs</a> element, all <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#graphics-element" id="ref-for-graphics-element①④">graphics elements</a> and the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-use" id="ref-for-elementdef-use①②">use</a> element
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>see individual properties
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>see individual properties
     <tr>
      <th>Media:
      <td>visual
   </table>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-mask-layer">&lt;mask-layer></dfn> = <a class="production" data-link-type="type" href="#typedef-mask-reference" id="ref-for-typedef-mask-reference⑥">&lt;mask-reference></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any①">||</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-position" id="ref-for-typedef-position①">&lt;position></a> [ / <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-backgrounds-3/#typedef-bg-size" id="ref-for-typedef-bg-size①">&lt;bg-size></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any②">||</a><a class="production" data-link-type="type" href="https://drafts.csswg.org/css-backgrounds-3/#typedef-repeat-style" id="ref-for-typedef-repeat-style①">&lt;repeat-style></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any③">||</a> <a class="production" data-link-type="type" href="#typedef-geometry-box" id="ref-for-typedef-geometry-box④">&lt;geometry-box></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any④">||</a> [ <a class="production" data-link-type="type" href="#typedef-geometry-box" id="ref-for-typedef-geometry-box⑤">&lt;geometry-box></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①④">|</a> no-clip ] <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any⑤">||</a> <a class="production" data-link-type="type" href="#typedef-compositing-operator" id="ref-for-typedef-compositing-operator①">&lt;compositing-operator></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any⑥">||</a> <a class="production" data-link-type="type" href="#typedef-masking-mode" id="ref-for-typedef-masking-mode①">&lt;masking-mode></a></pre>
   <p>If one <a class="production css" data-link-type="type" href="#typedef-geometry-box" id="ref-for-typedef-geometry-box⑥">&lt;geometry-box></a> value and the <a class="css" data-link-type="maybe" href="#valdef-mask-clip-no-clip" id="ref-for-valdef-mask-clip-no-clip">no-clip</a> keyword are present then <span class="production" id="ref-for-typedef-geometry-box⑦">&lt;geometry-box></span> sets <a class="property" data-link-type="propdesc" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin⑤">mask-origin</a> and <span class="css" id="ref-for-valdef-mask-clip-no-clip①">no-clip</span> sets <a class="property" data-link-type="propdesc" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip⑤">mask-clip</a> to that value.</p>
   <p>If one <a class="production css" data-link-type="type" href="#typedef-geometry-box" id="ref-for-typedef-geometry-box⑧">&lt;geometry-box></a> value and no <a class="css" data-link-type="maybe" href="#valdef-mask-clip-no-clip" id="ref-for-valdef-mask-clip-no-clip②">no-clip</a> keyword are present then <span class="production" id="ref-for-typedef-geometry-box⑨">&lt;geometry-box></span> sets both <a class="property" data-link-type="propdesc" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin⑥">mask-origin</a> and <a class="property" data-link-type="propdesc" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip⑥">mask-clip</a> to that value.</p>
   <p>If two <a class="production css" data-link-type="type" href="#typedef-geometry-box" id="ref-for-typedef-geometry-box①⓪">&lt;geometry-box></a> values are present, then the first sets <a class="property" data-link-type="propdesc" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin⑦">mask-origin</a> and the second <a class="property" data-link-type="propdesc" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip⑦">mask-clip</a>.</p>
   <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value④">used value</a> of the properties <a class="property" data-link-type="propdesc" href="#propdef-mask-repeat" id="ref-for-propdef-mask-repeat②">mask-repeat</a>, <a class="property" data-link-type="propdesc" href="#propdef-mask-position" id="ref-for-propdef-mask-position④">mask-position</a>, <a class="property" data-link-type="propdesc" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip⑧">mask-clip</a>, <a class="property" data-link-type="propdesc" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin⑧">mask-origin</a> and <a class="property" data-link-type="propdesc" href="#propdef-mask-size" id="ref-for-propdef-mask-size③">mask-size</a> must have no effect if <a class="production css" data-link-type="type" href="#typedef-mask-reference" id="ref-for-typedef-mask-reference⑦">&lt;mask-reference></a> references a <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask①①">mask</a> element. In this case the element defines position, sizing and clipping of the <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image①⑤">mask layer image</a>.</p>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-mask" id="ref-for-propdef-mask③">mask</a> shorthand also resets <a class="property" data-link-type="propdesc" href="#propdef-mask-border" id="ref-for-propdef-mask-border②">mask-border</a> to its initial value. It is therefore recommended that authors use the <span class="property" id="ref-for-propdef-mask④">mask</span> shorthand, rather than other shorthands or the individual properties, to override any mask settings earlier in the cascade. This will ensure that <span class="property" id="ref-for-propdef-mask-border③">mask-border</span> has also been reset to allow the new styles to take effect.</p>
   <h3 class="heading settled" data-level="7.10" id="the-mask-image-rendering-model"><span class="secno">7.10. </span><span class="content">The Mask Image Rendering Model</span><a class="self-link" href="#the-mask-image-rendering-model"></a></h3>
   <p>The application of the <a class="property" data-link-type="propdesc" href="#propdef-mask-image" id="ref-for-propdef-mask-image①①">mask-image</a> property with a value other than <span class="css">none</span> to an element formatted with the CSS box model establishes a <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#stacking-context" id="ref-for-stacking-context③">stacking context</a> in the same way that CSS <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity③">opacity</a> <a data-link-type="biblio" href="#biblio-css3color">[CSS3COLOR]</a> does, and all the element’s descendants are rendered together as a group with the masking applied to the group as a whole.</p>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-mask-image" id="ref-for-propdef-mask-image①②">mask-image</a> property has no effect on the geometry or hit-testing of any element’s CSS boxes.</p>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-mask" id="ref-for-propdef-mask⑤">mask</a> property is a <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermPresentationAttribute">presentation attribute</a> for SVG elements.</p>
   <h4 class="heading settled" data-level="7.10.1" id="MaskValues"><span class="secno">7.10.1. </span><span class="content">Mask processing</span><a class="self-link" href="#MaskValues"></a></h4>
   <p>In the following section, <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="mask-image">mask image</dfn> refers either to a <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image①⑥">mask layer image</a> or to a <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image①">mask border image</a>.</p>
   <p>A mask image may be interpreted using one of two different methods with regards to calculating the mask values that will be multiplied with the target alpha values.</p>
   <p>The first and simplest method of calculating the mask values is to use the alpha channel of the <a data-link-type="dfn" href="#mask-image" id="ref-for-mask-image">mask image</a>. In this case the mask value at a given point is simply the value of the alpha channel at that point. The color channels do not contribute to the mask value.</p>
   <p>The second method of calculating the mask values is to use the luminance of the mask image. In this case the mask value at a given point is computed from the color channel values and alpha channel value using the following procedure.</p>
   <ol>
    <li data-md>
     <p>Compute a luminance value from the color channel values.</p>
     <ul>
      <li data-md>
       <p>If the computed value of <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#ColorInterpolationProperty" id="ref-for-ColorInterpolationProperty①">color-interpolation</a> on the <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask①②">mask</a> element is <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/filter-effects-1/#valdef-color-interpolation-filters-linearrgb" id="ref-for-valdef-color-interpolation-filters-linearrgb">linearRGB</a>, convert the original image color values (potentially in the sRGB color space) to the linearRGB color space.</p>
      <li data-md>
       <p>Then, using non-premultiplied RGB color values, apply the luminance-to-alpha coefficients (as defined in the <a data-link-type="element" href="https://drafts.fxtf.org/filter-effects-1/#elementdef-fecolormatrix" id="ref-for-elementdef-fecolormatrix">feColorMatrix</a> filter primitive <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a>) to convert the RGB color values to luminance values.</p>
     </ul>
    <li data-md>
     <p>Multiply the computed luminance value by the corresponding alpha value to produce the mask value.</p>
   </ol>
   <p>Regardless of the method used, the procedure for calculating mask values assumes the content of the mask is a four-channel RGBA graphics object. For other types of graphics objects, special handling is required as follows.</p>
   <p>For a three-channel RGB graphics object that is used in a mask (e.g., when referencing a three-channel image file), the effect is as if the object were converted into a four-channel RGBA image with the alpha channel uniformly set to 1.</p>
   <p>For a single-channel image that is used in a mask (e.g., when referencing a single-channel grayscale image file), the effect is as if the object were converted into a four-channel RGBA image, where the single channel from the referenced object is used to compute the three color channels and the alpha channel is uniformly set to 1.</p>
   <p class="note" role="note"><span>Note:</span> When referencing a grayscale image file, the transfer curve relating the encoded grayscale values to linear light values must be taken into account when computing the color channels.</p>
   <p class="note" role="note"><span>Note:</span> SVG <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#graphics-element" id="ref-for-graphics-element①⑤">graphics elements</a> (e.g., <a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-circle" id="ref-for-elementdef-circle②">circle</a> or <a data-link-type="element" href="https://svgwg.org/svg2-draft/text.html#elementdef-text" id="ref-for-elementdef-text③">text</a>) are all treated as four-channel RGBA images for the purposes of masking operations.</p>
   <p>The effect of a mask is identical to what would have happened if there were no mask but instead the alpha channel of the given object were multiplied with the mask’s resulting mask values.</p>
   <p>Regions not covered by a <a data-link-type="dfn" href="#mask-image" id="ref-for-mask-image①">mask image</a> are treated as transparent black. The mask value is 0.</p>
   <p class="note" role="note"><span>Note:</span> Masks with repeating <a data-link-type="dfn" href="#mask-image" id="ref-for-mask-image②">mask image</a> tiles may have an offset to each other. The space between the <span id="ref-for-mask-image③">mask images</span> is treated as a transparent black mask.</p>
   <h4 class="heading settled" data-level="7.10.2" id="layering"><span class="secno">7.10.2. </span><span class="content">Layering Multiple Mask Images</span><a class="self-link" href="#layering"></a></h4>
   <p>The mask of a box can have multiple layers. The number of layers is determined by the number of comma-separated values for the <a class="property" data-link-type="propdesc" href="#propdef-mask-image" id="ref-for-propdef-mask-image①③">mask-image</a> property. A value of <span class="css">none</span> in a list of values with other <a class="production css" data-link-type="type" href="#typedef-mask-reference" id="ref-for-typedef-mask-reference⑧">&lt;mask-reference></a>s still creates a layer.</p>
   <p>See <a href="https://www.w3.org/TR/css3-background/#layering">Layering Multiple Background Images</a> <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a>.</p>
   <p><a class="property" data-link-type="propdesc" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode⑥">mask-mode</a> and <a class="property" data-link-type="propdesc" href="#propdef-mask-composite" id="ref-for-propdef-mask-composite④">mask-composite</a> do not have counterparts in CSS Backgrounds and Borders <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a>. Just like for the mask properties that do have a counterpart, the list of values are matched up from the first value: excess values at the end are not used. If a property doesn’t have enough comma-separated values to match the number of layers, the UA must calculate its used value by repeating the list of values until there are enough.</p>
   <p>All <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image①⑦">mask layer images</a> are transformed to alpha masks (if necessary see <a href="#MaskValues">Mask processing</a>) and combined by compositing taking the compositing operators specified by <a class="property" data-link-type="propdesc" href="#propdef-mask-composite" id="ref-for-propdef-mask-composite⑤">mask-composite</a> into account.</p>
   <h2 class="heading settled" data-level="8" id="mask-borders"><span class="secno">8. </span><span class="content">Border-Box Mask</span><a class="self-link" href="#mask-borders"></a></h2>
   <p>With <a class="property" data-link-type="propdesc" href="#propdef-mask-border" id="ref-for-propdef-mask-border④">mask-border</a> an image can be split into nine pieces: four corners, four edges and the middle piece as demonstrated in the figure below.</p>
   <div class="figure">
     <img alt="pieces of a mask border image" src="images/mask-box-image-mask.svg" width="240"> 
    <p class="caption">Pieces of a <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image②">mask border image</a>.</p>
   </div>
   <p>These pieces may be sliced, scaled and stretched in various ways to fit the size of the <a data-link-type="dfn" href="#mask-border-image-area" id="ref-for-mask-border-image-area②">mask border image area</a>. This distorted image is then used as a mask. The syntax of <a class="property" data-link-type="propdesc" href="#propdef-mask-border" id="ref-for-propdef-mask-border⑤">mask-border</a> corresponds to the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-image" id="ref-for-propdef-border-image">border-image</a> property of CSS Background and Borders <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a>.</p>
   <div class="example" id="example-f8023813">
    <a class="self-link" href="#example-f8023813"></a> The <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image③">mask border image</a> in the following example is split into four corners with dimensions of 75 pixels, four edges and the middle piece that is stretched and scaled. 
    <div class="figure">
      <img alt="Example for &apos;mask-border&apos;" height="240" src="images/mask-box-image.svg" width="720"> 
     <p class="caption">Example for <a class="property" data-link-type="propdesc" href="#propdef-mask-border" id="ref-for-propdef-mask-border⑥">mask-border</a>. The object on the left is the object to mask. The second image is the alpha mask and the last image the masked object.</p>
    </div>
<pre><code class="highlight"><c- f>div </c-><c- p>{</c->
    <c- k>background</c-><c- p>:</c-> <c- nf>linear-gradient</c-><c- p>(</c->bottom<c- p>,</c-> #F27BAA <c- m>0</c-><c- l>%</c-><c- p>,</c-> #FCC8AD <c- m>100</c-><c- l>%</c-><c- p>);</c->
    <c- k>mask-border-slice</c-><c- p>:</c-> <c- m>25</c-> fill<c- p>;</c->
    <c- k>mask-border-repeat</c-><c- p>:</c-> stretch<c- p>;</c->
    <c- k>mask-border-source</c-><c- p>:</c-> <c- nf>url</c-><c- p>(</c-><c- s>mask.png</c-><c- p>);</c->
<c- p>}</c->
</code></pre>
   </div>
   <h3 class="heading settled" data-level="8.1" id="the-mask-border-source"><span class="secno">8.1. </span><span class="content">Mask Border Image Source: the <a class="property" data-link-type="propdesc" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source⑥">mask-border-source</a> property</span><a class="self-link" href="#the-mask-border-source"></a></h3>
   <table class="def propdef" data-link-for-hint="mask-border-source">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-border-source">mask-border-source</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑤">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image④">&lt;image></a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>none
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#container-element" id="ref-for-container-element①①">container elements</a> excluding the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-defs" id="ref-for-elementdef-defs①⓪">defs</a> element, all <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#graphics-element" id="ref-for-graphics-element①⑥">graphics elements</a> and the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-use" id="ref-for-elementdef-use①③">use</a> element
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>they keyword <span class="css">none</span> or the computed <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image⑤">&lt;image></a>
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>Specifies an image to be used as <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="mask-border-image">mask border image</dfn>.</p>
   <p>An image that is an empty image (zero width or zero height), that fails to download, is non-existent, or that cannot be displayed (e.g. because it is not in a supported image format) is ignored. It still counts as an <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image④">mask border image</a> but does not mask the element.</p>
   <p>See “<a href="#MaskValues">Mask processing</a>” on how to process the <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image⑤">mask border image</a>.</p>
   <p>A computed value of other than <span class="css">none</span> results in the creation of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#stacking-context" id="ref-for-stacking-context④">stacking context</a> <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> the same way that CSS <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity④">opacity</a> <a data-link-type="biblio" href="#biblio-css3color">[CSS3COLOR]</a> does for values other than <span class="css">1</span>.</p>
   <p><a class="property" data-link-type="propdesc" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source⑦">mask-border-source</a> and <a class="property" data-link-type="propdesc" href="#propdef-mask-image" id="ref-for-propdef-mask-image①④">mask-image</a> can be specified independent of each other. If both properties have a value other than <span class="css">none</span>, the element is masked by both masking operations one after the other.</p>
   <p class="note" role="note"><span>Note:</span> It does not matter if <a class="property" data-link-type="propdesc" href="#propdef-mask-image" id="ref-for-propdef-mask-image①⑤">mask-image</a> is applied to the element before or after <a class="property" data-link-type="propdesc" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source⑧">mask-border-source</a>. Both operation orders result in the same rendering.</p>
   <h3 class="heading settled" data-level="8.2" id="the-mask-border-mode"><span class="secno">8.2. </span><span class="content">Mask Border Image Interpretation: the <a class="property" data-link-type="propdesc" href="#propdef-mask-border-mode" id="ref-for-propdef-mask-border-mode">mask-border-mode</a> property</span><a class="self-link" href="#the-mask-border-mode"></a></h3>
   <table class="def propdef" data-link-for-hint="mask-border-mode">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-border-mode">mask-border-mode</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">luminance <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑥">|</a> alpha
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>alpha
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#container-element" id="ref-for-container-element①②">container elements</a> excluding the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-defs" id="ref-for-elementdef-defs①①">defs</a> element, all <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#graphics-element" id="ref-for-graphics-element①⑦">graphics elements</a> and the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-use" id="ref-for-elementdef-use①④">use</a> element
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Animation discrete:
      <td>discrete
   </table>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-mask-border-mode" id="ref-for-propdef-mask-border-mode①">mask-border-mode</a> property indicates whether the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image⑥">&lt;image></a> value for <a class="property" data-link-type="propdesc" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source⑨">mask-border-source</a> is treated as luminance mask or alpha mask. (See <a href="#MaskValues">Mask processing</a>.)</p>
   <p>Values have the following meanings:</p>
   <div>
    <dl>
     <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-border-mode" data-dfn-type="value" data-export id="valdef-mask-border-mode-alpha">alpha</dfn>
     <dd data-md>
      <p>A value of <a class="css" data-link-type="maybe" href="#valdef-mask-border-mode-alpha" id="ref-for-valdef-mask-border-mode-alpha">alpha</a> indicates that the alpha values of the <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image⑥">mask border image</a> should be used as the mask values. See <a href="#MaskValues">Calculating mask values</a>.</p>
     <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-border-mode" data-dfn-type="value" data-export id="valdef-mask-border-mode-luminance">luminance</dfn>
     <dd data-md>
      <p>A value of <a class="css" data-link-type="maybe" href="#valdef-mask-border-mode-luminance" id="ref-for-valdef-mask-border-mode-luminance">luminance</a> indicates that the luminance values of the <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image⑦">mask border image</a> should be used as the mask values. See <a href="#MaskValues">Calculating mask values</a>.</p>
    </dl>
   </div>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode⑦">mask-mode</a> and <a class="property" data-link-type="propdesc" href="#propdef-mask-type" id="ref-for-propdef-mask-type③">mask-type</a> properties must have no affect on the <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image⑧">mask border image</a> type.</p>
   <h3 class="heading settled" data-level="8.3" id="the-mask-border-slice"><span class="secno">8.3. </span><span class="content">Mask Border Image Slicing: the <a class="property" data-link-type="propdesc" href="#propdef-mask-border-slice" id="ref-for-propdef-mask-border-slice">mask-border-slice</a> property</span><a class="self-link" href="#the-mask-border-slice"></a></h3>
   <table class="def propdef" data-link-for-hint="mask-border-slice">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-border-slice">mask-border-slice</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#typedef-number-percentage" id="ref-for-typedef-number-percentage">&lt;number-percentage></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range">{1,4}</a> fill<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>0
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#container-element" id="ref-for-container-element①③">container elements</a> excluding the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-defs" id="ref-for-elementdef-defs①②">defs</a> element, all <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#graphics-element" id="ref-for-graphics-element①⑧">graphics elements</a> and the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-use" id="ref-for-elementdef-use①⑤">use</a> element
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>refer to size of the <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image⑨">mask border image</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>This property specifies inward offsets from the top, right, bottom, and left edges of the <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image①⓪">mask border image</a>, dividing it into nine regions: four corners, four edges and a middle. The middle image part is discarded and treated as fully opaque white (the content covered by the middle part is not masked and shines through) unless the <dfn class="dfn-paneled css" data-dfn-for="mask-border-slice" data-dfn-type="value" data-export id="valdef-mask-border-slice-fill">fill</dfn> keyword is present.</p>
   <p>See the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-image-slice" id="ref-for-propdef-border-image-slice">border-image-slice</a> property <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a> for the definitions of the property values.</p>
   <h3 class="heading settled" data-level="8.4" id="the-mask-border-width"><span class="secno">8.4. </span><span class="content">Masking Areas: the <a class="property" data-link-type="propdesc" href="#propdef-mask-border-width" id="ref-for-propdef-mask-border-width">mask-border-width</a> property</span><a class="self-link" href="#the-mask-border-width"></a></h3>
   <table class="def propdef" data-link-for-hint="mask-border-width">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-border-width">mask-border-width</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">[ <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage">&lt;length-percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑦">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value">&lt;number></a> <span id="ref-for-comb-one①⑧">|</span> auto ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range①">{1,4}</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#container-element" id="ref-for-container-element①④">container elements</a> excluding the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-defs" id="ref-for-elementdef-defs①③">defs</a> element, all <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#graphics-element" id="ref-for-graphics-element①⑨">graphics elements</a> and the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-use" id="ref-for-elementdef-use①⑥">use</a> element
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>relative to width/height of the <a data-link-type="dfn" href="#mask-border-image-area" id="ref-for-mask-border-image-area③">mask border image area</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>all <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value①" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>s made absolute, otherwise as specified
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>The <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image①①">mask border image</a> is drawn inside an area called the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="mask-border-image-area">mask border image area</dfn>. This is an area whose boundaries by default correspond to the border box, see <a class="property" data-link-type="propdesc" href="#propdef-mask-border-outset" id="ref-for-propdef-mask-border-outset">mask-border-outset</a>.</p>
   <p>See the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-image-width" id="ref-for-propdef-border-image-width">border-image-width</a> property <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a> for the definitions of the property values.</p>
   <p class="note" role="note"><span>Note:</span> For SVG elements without an associated layout box the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width" id="ref-for-propdef-border-width">border-width</a> is considered to be <span class="css">0</span>.</p>
   <h3 class="heading settled" data-level="8.5" id="the-mask-border-outset"><span class="secno">8.5. </span><span class="content">Edge Overhang: the <a class="property" data-link-type="propdesc" href="#propdef-mask-border-outset" id="ref-for-propdef-mask-border-outset①">mask-border-outset</a> property</span><a class="self-link" href="#the-mask-border-outset"></a></h3>
   <table class="def propdef" data-link-for-hint="mask-border-outset">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-border-outset">mask-border-outset</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">[ <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value②" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑨">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①">&lt;number></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range②">{1,4}</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>0
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#container-element" id="ref-for-container-element①⑤">container elements</a> excluding the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-defs" id="ref-for-elementdef-defs①④">defs</a> element, all <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#graphics-element" id="ref-for-graphics-element②⓪">graphics elements</a> and the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-use" id="ref-for-elementdef-use①⑦">use</a> element
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>all <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value③" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>s made absolute, otherwise as specified
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>The values specify the amount by which the <a data-link-type="dfn" href="#mask-border-image-area" id="ref-for-mask-border-image-area④">mask border image area</a> extends beyond the border box. If it has four values, they set the outsets on the top, right, bottom and left sides in that order. If the left is missing, it is the same as the right; if the bottom is missing, it is the same as the top; if the right is missing, it is the same as the top.</p>
   <p>As with <a class="property" data-link-type="propdesc" href="#propdef-mask-border-width" id="ref-for-propdef-mask-border-width①">mask-border-width</a>, a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value②">&lt;number></a> represents a multiple of the corresponding <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width" id="ref-for-propdef-border-width①">border-width</a>. Negative values are not allowed for any of the <a class="property" data-link-type="propdesc" href="#propdef-mask-border-outset" id="ref-for-propdef-mask-border-outset②">mask-border-outset</a> values.</p>
   <p class="note" role="note"><span>Note:</span> For SVG elements without associated layout box the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width" id="ref-for-propdef-border-width②">border-width</a> is considered to be <span class="css">0</span>.</p>
   <h3 class="heading settled" data-level="8.6" id="the-mask-border-repeat"><span class="secno">8.6. </span><span class="content">Mask Border Image Tiling: the <a class="property" data-link-type="propdesc" href="#propdef-mask-border-repeat" id="ref-for-propdef-mask-border-repeat">mask-border-repeat</a> property</span><a class="self-link" href="#the-mask-border-repeat"></a></h3>
   <table class="def propdef" data-link-for-hint="mask-border-repeat">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-border-repeat">mask-border-repeat</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">[ stretch <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⓪">|</a> repeat <span id="ref-for-comb-one②①">|</span> round <span id="ref-for-comb-one②②">|</span> space ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range③">{1,2}</a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>stretch
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#container-element" id="ref-for-container-element①⑥">container elements</a> excluding the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-defs" id="ref-for-elementdef-defs①⑤">defs</a> element, all <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#graphics-element" id="ref-for-graphics-element②①">graphics elements</a> and the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-use" id="ref-for-elementdef-use①⑧">use</a> element
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>This property specifies how the images for the sides and the middle part of the <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image①②">mask border image</a> are scaled and tiled. The first keyword applies to the horizontal sides, the second to the vertical ones. If the second keyword is absent, it is assumed to be the same as the first.</p>
   <p>See the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-image-repeat" id="ref-for-propdef-border-image-repeat">border-image-repeat</a> property <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a> for the definitions of the property values.</p>
   <p>The exact process for scaling and tiling the <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image①③">mask border image</a> parts is given in the section <a href="#masking-with-the-mask-border-image">Masking with the mask border image</a></p>
   <h3 class="heading settled" data-level="8.7" id="the-mask-border"><span class="secno">8.7. </span><span class="content">Mask Border Image Shorthand: the <a class="property" data-link-type="propdesc" href="#propdef-mask-border" id="ref-for-propdef-mask-border⑦">mask-border</a> property</span><a class="self-link" href="#the-mask-border"></a></h3>
   <table class="def propdef" data-link-for-hint="mask-border">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-border">mask-border</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source①⓪">&lt;'mask-border-source'></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any⑦">||</a> <a class="production" data-link-type="propdesc" href="#propdef-mask-border-slice" id="ref-for-propdef-mask-border-slice①">&lt;'mask-border-slice'></a> [ / <a class="production" data-link-type="propdesc" href="#propdef-mask-border-width" id="ref-for-propdef-mask-border-width②">&lt;'mask-border-width'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt②">?</a> [ / <a class="production" data-link-type="propdesc" href="#propdef-mask-border-outset" id="ref-for-propdef-mask-border-outset③">&lt;'mask-border-outset'></a> ]<span id="ref-for-mult-opt③">?</span> ]<span id="ref-for-mult-opt④">?</span> <span id="ref-for-comb-any⑧">||</span> <a class="production" data-link-type="propdesc" href="#propdef-mask-border-repeat" id="ref-for-propdef-mask-border-repeat①">&lt;'mask-border-repeat'></a> <span id="ref-for-comb-any⑨">||</span> <a class="production" data-link-type="propdesc" href="#propdef-mask-border-mode" id="ref-for-propdef-mask-border-mode②">&lt;'mask-border-mode'></a>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>See individual properties
     <tr>
      <th>Applies to:
      <td>See individual properties
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>See individual properties
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>See individual properties
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>This is a shorthand property for setting <a class="property" data-link-type="propdesc" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source①①">mask-border-source</a>, <a class="property" data-link-type="propdesc" href="#propdef-mask-border-slice" id="ref-for-propdef-mask-border-slice②">mask-border-slice</a>, <a class="property" data-link-type="propdesc" href="#propdef-mask-border-width" id="ref-for-propdef-mask-border-width③">mask-border-width</a>, <a class="property" data-link-type="propdesc" href="#propdef-mask-border-outset" id="ref-for-propdef-mask-border-outset④">mask-border-outset</a>, <a class="property" data-link-type="propdesc" href="#propdef-mask-border-repeat" id="ref-for-propdef-mask-border-repeat②">mask-border-repeat</a> and <a class="property" data-link-type="propdesc" href="#propdef-mask-border-mode" id="ref-for-propdef-mask-border-mode③">mask-border-mode</a>. Omitted values are set to their initial values.</p>
   <p class="note" role="note"><span>Note:</span> The <a class="property" data-link-type="propdesc" href="#propdef-mask" id="ref-for-propdef-mask⑥">mask</a> shorthand resets the properties <a class="property" data-link-type="propdesc" href="#propdef-mask-border" id="ref-for-propdef-mask-border⑧">mask-border</a>, <a class="property" data-link-type="propdesc" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source①②">mask-border-source</a>, <a class="property" data-link-type="propdesc" href="#propdef-mask-border-slice" id="ref-for-propdef-mask-border-slice③">mask-border-slice</a>, <a class="property" data-link-type="propdesc" href="#propdef-mask-border-width" id="ref-for-propdef-mask-border-width④">mask-border-width</a>, <a class="property" data-link-type="propdesc" href="#propdef-mask-border-outset" id="ref-for-propdef-mask-border-outset⑤">mask-border-outset</a>, <a class="property" data-link-type="propdesc" href="#propdef-mask-border-repeat" id="ref-for-propdef-mask-border-repeat③">mask-border-repeat</a> and <a class="property" data-link-type="propdesc" href="#propdef-mask-border-mode" id="ref-for-propdef-mask-border-mode④">mask-border-mode</a>.</p>
   <h3 class="heading settled" data-level="8.8" id="masking-with-the-mask-border-image"><span class="secno">8.8. </span><span class="content">Masking with the mask border image</span><a class="self-link" href="#masking-with-the-mask-border-image"></a></h3>
   <p>After the <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image①④">mask border image</a> given by <a class="property" data-link-type="propdesc" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source①③">mask-border-source</a> is sliced by the <a class="property" data-link-type="propdesc" href="#propdef-mask-border-slice" id="ref-for-propdef-mask-border-slice④">mask-border-slice</a> values, the resulting nine images are scaled, positioned, and tiled into their corresponding <span id="ref-for-mask-border-image①⑤">mask border image</span> regions in four steps as described in the section <a href="https://www.w3.org/TR/css3-background/#border-image-process">Drawing the Border Image</a> <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a>.</p>
   <p>The application of the <a class="property" data-link-type="propdesc" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source①④">mask-border-source</a> property to an element formatted with the CSS box model establishes a <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#stacking-context" id="ref-for-stacking-context⑤">stacking context</a> in the same way that CSS <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity⑤">opacity</a> <a data-link-type="biblio" href="#biblio-css3color">[CSS3COLOR]</a> does, and all the element’s descendants are rendered together as a group with the masking applied to the group as a whole.</p>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source①⑤">mask-border-source</a> property has no effect on the geometry or hit-testing of any element’s CSS boxes.</p>
   <h2 class="heading settled" data-level="9" id="svg-masks"><span class="secno">9. </span><span class="content">SVG Mask Sources</span><a class="self-link" href="#svg-masks"></a></h2>
   <h3 class="heading settled" data-level="9.1" id="MaskElement"><span class="secno">9.1. </span><span class="content">The <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask①③">mask</a> element</span><a class="self-link" href="#MaskElement"></a></h3>
   <table class="definition-table">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled" data-dfn-type="element" data-export id="elementdef-mask"><code>mask</code></dfn> 
     <tr>
      <th>Categories:
      <td><a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#container-element" id="ref-for-container-element①⑦">container elements</a>, <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/render.html#TermNeverRenderedElement" id="ref-for-TermNeverRenderedElement①">never-rendered element</a>
     <tr>
      <th>Content model:
      <td>
       Any number of the following elements, in any order: 
       <ul class="no-bullets">
        <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermAnimationElement">animation</a> <span class="expanding"> — <a data-link-type="element" href="https://www.w3.org/TR/SVG11/animate.html#AnimateElement" id="ref-for-AnimateElement①">animate</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG11/animate.html#AnimateColorElement" id="ref-for-AnimateColorElement①">animateColor</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement" id="ref-for-AnimateMotionElement①">animateMotion</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement" id="ref-for-AnimateTransformElement①">animateTransform</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG11/animate.html#SetElement" id="ref-for-SetElement①">set</a></span>
        <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermDescriptiveElement">descriptive</a> <span class="expanding"> — <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-desc" id="ref-for-elementdef-desc①">desc</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-title" id="ref-for-elementdef-title①">title</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-metadata" id="ref-for-elementdef-metadata①">metadata</a></span>
        <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermShapeElement">shape</a> <span class="expanding"> — <a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-circle" id="ref-for-elementdef-circle③">circle</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-ellipse" id="ref-for-elementdef-ellipse①">ellipse</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-line" id="ref-for-elementdef-line①">line</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/paths.html#elementdef-path" id="ref-for-elementdef-path④">path</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-polygon" id="ref-for-elementdef-polygon①">polygon</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-polyline" id="ref-for-elementdef-polyline①">polyline</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-rect" id="ref-for-elementdef-rect①">rect</a></span>
        <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermStructuralElement">structural</a> <span class="expanding"> — <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-defs" id="ref-for-elementdef-defs①⑥">defs</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-g" id="ref-for-elementdef-g">g</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-svg" id="ref-for-elementdef-svg">svg</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-symbol" id="ref-for-elementdef-symbol">symbol</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-use" id="ref-for-elementdef-use①⑨">use</a></span>
        <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGradientElement">gradient</a> <span class="expanding"> — <a data-link-type="element" href="https://svgwg.org/svg2-draft/pservers.html#elementdef-linearGradient" id="ref-for-elementdef-linearGradient">linearGradient</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/pservers.html#elementdef-radialGradient" id="ref-for-elementdef-radialGradient">radialGradient</a></span>
        <li><a data-link-type="element" href="https://svgwg.org/svg2-draft/linking.html#elementdef-a" id="ref-for-elementdef-a">a</a>
        <li><a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath③⓪">clipPath</a>
        <li><a data-link-type="element" href="https://www.w3.org/TR/SVG11/color.html#ColorProfileElement" id="ref-for-ColorProfileElement">color-profile</a>
        <li><a data-link-type="element" href="https://www.w3.org/TR/SVG11/interact.html#CursorElement" id="ref-for-CursorElement">cursor</a>
        <li><a data-link-type="element" href="https://drafts.fxtf.org/filter-effects-1/#elementdef-filter" id="ref-for-elementdef-filter">filter</a>
        <li><a data-link-type="element" href="https://www.w3.org/TR/SVG11/fonts.html#FontElement" id="ref-for-FontElement">font</a>
        <li><a data-link-type="element" href="https://www.w3.org/TR/SVG11/fonts.html#FontFaceElement" id="ref-for-FontFaceElement">font-face</a>
        <li><a data-link-type="element" href="https://svgwg.org/svg2-draft/embedded.html#elementdef-foreignObject" id="ref-for-elementdef-foreignObject">foreignObject</a>
        <li><a data-link-type="element" href="https://svgwg.org/svg2-draft/embedded.html#elementdef-image" id="ref-for-elementdef-image">image</a>
        <li><a data-link-type="element" href="https://svgwg.org/svg2-draft/painting.html#elementdef-marker" id="ref-for-elementdef-marker">marker</a>
        <li><a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask①④">mask</a>
        <li><a data-link-type="element" href="https://svgwg.org/svg2-draft/pservers.html#elementdef-pattern" id="ref-for-elementdef-pattern">pattern</a>
        <li><a data-link-type="element" href="https://svgwg.org/svg2-draft/interact.html#elementdef-script" id="ref-for-elementdef-script①">script</a>
        <li><a data-link-type="element" href="https://svgwg.org/svg2-draft/styling.html#elementdef-style" id="ref-for-elementdef-style">style</a>
        <li><a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-switch" id="ref-for-elementdef-switch">switch</a>
        <li><a data-link-type="element" href="https://svgwg.org/svg2-draft/linking.html#elementdef-view" id="ref-for-elementdef-view">view</a>
        <li><a data-link-type="element" href="https://svgwg.org/svg2-draft/text.html#elementdef-text" id="ref-for-elementdef-text④">text</a>
        <li><a data-link-type="element" href="https://www.w3.org/TR/SVG11/text.html#AlternateGlyphDefinitions" id="ref-for-AlternateGlyphDefinitions">altGlyphDef</a>
       </ul>
     <tr>
      <th>Attributes:
      <td>
       <ul class="no-bullets">
        <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermConditionalProcessingAttribute">conditional processing attributes</a><span class="expanding"> — <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredFeaturesAttribute"><span class="attr-name">‘requiredFeatures’</span></a>, <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredExtensionsAttribute"><span class="attr-name">‘requiredExtensions’</span></a>, <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SystemLanguageAttribute"><span class="attr-name">‘systemLanguage’</span></a></span>
        <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span>
        <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermPresentationAttribute">presentation attributes</a><span class="expanding"> — <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-inline-3/#propdef-alignment-baseline" id="ref-for-propdef-alignment-baseline①">alignment-baseline</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-inline-3/#propdef-baseline-shift" id="ref-for-propdef-baseline-shift①">baseline-shift</a>, <a class="property" data-link-type="propdesc" href="#propdef-clip" id="ref-for-propdef-clip②">clip</a>, <a class="property" data-link-type="propdesc" href="#propdef-clip-path" id="ref-for-propdef-clip-path①⑤">clip-path</a>, <a class="property" data-link-type="propdesc" href="#propdef-clip-rule" id="ref-for-propdef-clip-rule⑨">clip-rule</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-color" id="ref-for-propdef-color①">color</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#ColorInterpolationProperty" id="ref-for-ColorInterpolationProperty②">color-interpolation</a>, <a class="property" data-link-type="propdesc" href="https://drafts.fxtf.org/filter-effects-1/#propdef-color-interpolation-filters" id="ref-for-propdef-color-interpolation-filters①">color-interpolation-filters</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/SVG11/color.html#ColorProfileProperty" id="ref-for-ColorProfileProperty①">color-profile</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/SVG11/painting.html#ColorRenderingProperty" id="ref-for-ColorRenderingProperty①">color-rendering</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-ui-4/#propdef-cursor" id="ref-for-propdef-cursor①">cursor</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①">direction</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display⑤">display</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-inline-3/#propdef-dominant-baseline" id="ref-for-propdef-dominant-baseline①">dominant-baseline</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/SVG11/filters.html#EnableBackgroundProperty" id="ref-for-EnableBackgroundProperty①">enable-background</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#FillProperty" id="ref-for-FillProperty②">fill</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#FillOpacityProperty" id="ref-for-FillOpacityProperty①">fill-opacity</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#FillRuleProperty" id="ref-for-FillRuleProperty④">fill-rule</a>, <a class="property" data-link-type="propdesc" href="https://drafts.fxtf.org/filter-effects-1/#propdef-filter" id="ref-for-propdef-filter①">filter</a>, <a class="property" data-link-type="propdesc" href="https://drafts.fxtf.org/filter-effects-1/#propdef-flood-color" id="ref-for-propdef-flood-color①">flood-color</a>, <a class="property" data-link-type="propdesc" href="https://drafts.fxtf.org/filter-effects-1/#propdef-flood-opacity" id="ref-for-propdef-flood-opacity①">flood-opacity</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font" id="ref-for-propdef-font①">font</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-family" id="ref-for-propdef-font-family①">font-family</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size" id="ref-for-propdef-font-size①">font-size</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-size-adjust" id="ref-for-propdef-font-size-adjust①">font-size-adjust</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-stretch" id="ref-for-propdef-font-stretch①">font-stretch</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-style" id="ref-for-propdef-font-style①">font-style</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-variant" id="ref-for-propdef-font-variant①">font-variant</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-weight" id="ref-for-propdef-font-weight①">font-weight</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/SVG11/text.html#GlyphOrientationHorizontalProperty" id="ref-for-GlyphOrientationHorizontalProperty①">glyph-orientation-horizontal</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-glyph-orientation-vertical" id="ref-for-propdef-glyph-orientation-vertical①">glyph-orientation-vertical</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-images-3/#propdef-image-rendering" id="ref-for-propdef-image-rendering①">image-rendering</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/SVG11/text.html#KerningProperty" id="ref-for-KerningProperty①">kerning</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-letter-spacing" id="ref-for-propdef-letter-spacing①">letter-spacing</a>, <a class="property" data-link-type="propdesc" href="https://drafts.fxtf.org/filter-effects-1/#propdef-lighting-color" id="ref-for-propdef-lighting-color①">lighting-color</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#MarkerProperty" id="ref-for-MarkerProperty①">marker</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#MarkerEndProperty" id="ref-for-MarkerEndProperty①">marker-end</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#MarkerMidProperty" id="ref-for-MarkerMidProperty①">marker-mid</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#MarkerStartProperty" id="ref-for-MarkerStartProperty①">marker-start</a>, <a class="property" data-link-type="propdesc" href="#propdef-mask" id="ref-for-propdef-mask⑦">mask</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity⑥">opacity</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow②">overflow</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/interact.html#PointerEventsProperty" id="ref-for-PointerEventsProperty②">pointer-events</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#ShapeRenderingProperty" id="ref-for-ShapeRenderingProperty①">shape-rendering</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/pservers.html#StopColorProperty" id="ref-for-StopColorProperty①">stop-color</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/pservers.html#StopOpacityProperty" id="ref-for-StopOpacityProperty①">stop-opacity</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeProperty" id="ref-for-StrokeProperty②">stroke</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeDasharrayProperty" id="ref-for-StrokeDasharrayProperty①">stroke-dasharray</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeDashoffsetProperty" id="ref-for-StrokeDashoffsetProperty①">stroke-dashoffset</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeLinecapProperty" id="ref-for-StrokeLinecapProperty①">stroke-linecap</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeLinejoinProperty" id="ref-for-StrokeLinejoinProperty①">stroke-linejoin</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeMiterlimitProperty" id="ref-for-StrokeMiterlimitProperty①">stroke-miterlimit</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeOpacityProperty" id="ref-for-StrokeOpacityProperty①">stroke-opacity</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeWidthProperty" id="ref-for-StrokeWidthProperty②">stroke-width</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/text.html#TextAnchorProperty" id="ref-for-TextAnchorProperty①">text-anchor</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration" id="ref-for-propdef-text-decoration①">text-decoration</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#TextRenderingProperty" id="ref-for-TextRenderingProperty①">text-rendering</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi①">unicode-bidi</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visufx.html#propdef-visibility" id="ref-for-propdef-visibility②">visibility</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-word-spacing" id="ref-for-propdef-word-spacing①">word-spacing</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode①">writing-mode</a></span>
        <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#ClassAttribute"><span class="attr-name">‘class’</span></a>
        <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#StyleAttribute"><span class="attr-name">‘style’</span></a>
        <li>‘<a data-link-type="element-attr" href="#element-attrdef-mask-x" id="ref-for-element-attrdef-mask-x①">x</a>’
        <li>‘<a data-link-type="element-attr" href="#element-attrdef-mask-y" id="ref-for-element-attrdef-mask-y①">y</a>’
        <li>‘<a data-link-type="element-attr" href="#element-attrdef-mask-width" id="ref-for-element-attrdef-mask-width①">width</a>’
        <li>‘<a data-link-type="element-attr" href="#element-attrdef-mask-height" id="ref-for-element-attrdef-mask-height①">height</a>’
        <li>‘<a data-link-type="element-attr" href="#element-attrdef-mask-maskunits" id="ref-for-element-attrdef-mask-maskunits①">maskUnits</a>’
        <li>‘<a data-link-type="element-attr" href="#element-attrdef-mask-maskcontentunits" id="ref-for-element-attrdef-mask-maskcontentunits">maskContentUnits</a>’
       </ul>
     <tr>
      <th>DOM Interfaces:
      <td><a class="idlinterface" href="#InterfaceSVGMaskElement">SVGMaskElement</a>
   </table>
   <p><em>Attribute definitions:</em></p>
   <dl>
    <dt data-md><dfn class="dfn-paneled" data-dfn-for="mask" data-dfn-type="element-attr" data-export id="element-attrdef-mask-maskunits"><code>maskUnits</code></dfn> = "<a class="css" data-link-type="maybe" href="#valdef-maskunits-userspaceonuse" id="ref-for-valdef-maskunits-userspaceonuse">userSpaceOnUse</a> | <a class="css" data-link-type="maybe" href="#valdef-maskunits-objectboundingbox" id="ref-for-valdef-maskunits-objectboundingbox">objectBoundingBox</a>"
    <dd data-md>
     <p>Defines the coordinate system for attributes <a data-link-type="element-attr" href="#element-attrdef-mask-x" id="ref-for-element-attrdef-mask-x②">x</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-y" id="ref-for-element-attrdef-mask-y②">y</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-width" id="ref-for-element-attrdef-mask-width②">width</a> and <a data-link-type="element-attr" href="#element-attrdef-mask-height" id="ref-for-element-attrdef-mask-height②">height</a>.</p>
     <dl>
      <dt data-md><dfn class="dfn-paneled css" data-dfn-for="maskUnits" data-dfn-type="value" data-export id="valdef-maskunits-userspaceonuse">userSpaceOnUse</dfn>
      <dd data-md>
       <p><a data-link-type="element-attr" href="#element-attrdef-mask-x" id="ref-for-element-attrdef-mask-x③">x</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-y" id="ref-for-element-attrdef-mask-y③">y</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-width" id="ref-for-element-attrdef-mask-width③">width</a> and <a data-link-type="element-attr" href="#element-attrdef-mask-height" id="ref-for-element-attrdef-mask-height③">height</a> represent values in the current <a data-link-type="dfn" href="https://drafts.csswg.org/css-transforms-1/#user-coordinate-system" id="ref-for-user-coordinate-system②">user coordinate system</a> <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a> in place at the time when the <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask①⑤">mask</a> element is referenced (i.e., the <span id="ref-for-user-coordinate-system③">user coordinate system</span> for the element referencing the <span id="ref-for-elementdef-mask①⑥">mask</span> element via the <a class="property" data-link-type="propdesc" href="#propdef-mask" id="ref-for-propdef-mask⑧">mask</a> property).</p>
      <dt data-md><dfn class="dfn-paneled css" data-dfn-for="maskUnits" data-dfn-type="value" data-export id="valdef-maskunits-objectboundingbox">objectBoundingBox</dfn>
      <dd data-md>
       <p><a data-link-type="element-attr" href="#element-attrdef-mask-x" id="ref-for-element-attrdef-mask-x④">x</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-y" id="ref-for-element-attrdef-mask-y④">y</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-width" id="ref-for-element-attrdef-mask-width④">width</a> and <a data-link-type="element-attr" href="#element-attrdef-mask-height" id="ref-for-element-attrdef-mask-height④">height</a> represent fractions or percentages of the <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/coords.html#TermObjectBoundingBox" id="ref-for-TermObjectBoundingBox④">object bounding box</a> of the element to which the mask is applied. <a href="https://www.w3.org/TR/SVG/coords.html#Units">User coordinates</a> are sized equivalently to the CSS <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#px" id="ref-for-px①">px</a> unit.</p>
     </dl>
     <p>If attribute <a data-link-type="element-attr" href="#element-attrdef-mask-maskunits" id="ref-for-element-attrdef-mask-maskunits②">maskUnits</a> is not specified, then the effect is as if a value of <a class="css" data-link-type="maybe" href="#valdef-maskunits-objectboundingbox" id="ref-for-valdef-maskunits-objectboundingbox①">objectBoundingBox</a> were specified.</p>
     <p>Animatable: yes.</p>
    <dt data-md><dfn class="dfn-paneled" data-dfn-for="mask" data-dfn-type="element-attr" data-export id="element-attrdef-mask-maskcontentunits"><code>maskContentUnits</code></dfn> = "<a class="css" data-link-type="maybe" href="#valdef-maskcontentunits-userspaceonuse" id="ref-for-valdef-maskcontentunits-userspaceonuse">userSpaceOnUse</a> | <a class="css" data-link-type="maybe" href="#valdef-maskcontentunits-objectboundingbox" id="ref-for-valdef-maskcontentunits-objectboundingbox">objectBoundingBox</a>"
    <dd data-md>
     <p>Defines the coordinate system for the contents of the <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask①⑦">mask</a>.</p>
     <dl>
      <dt data-md><dfn class="dfn-paneled css" data-dfn-for="maskContentUnits" data-dfn-type="value" data-export id="valdef-maskcontentunits-userspaceonuse">userSpaceOnUse</dfn>
      <dd data-md>
       <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-transforms-1/#user-coordinate-system" id="ref-for-user-coordinate-system④">user coordinate system</a> for the contents of the <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask①⑧">mask</a> element is the current <span id="ref-for-user-coordinate-system⑤">user coordinate system</span> in place at the time when the <span id="ref-for-elementdef-mask①⑨">mask</span> element is referenced (i.e., the <span id="ref-for-user-coordinate-system⑥">user coordinate system</span> for the element referencing the <span id="ref-for-elementdef-mask②⓪">mask</span> element via the <a class="property" data-link-type="propdesc" href="#propdef-mask" id="ref-for-propdef-mask⑨">mask</a> property).</p>
      <dt data-md><dfn class="dfn-paneled css" data-dfn-for="maskContentUnits" data-dfn-type="value" data-export id="valdef-maskcontentunits-objectboundingbox">objectBoundingBox</dfn>
      <dd data-md>
       <p>The coordinate system has its origin at the top left corner of the <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/coords.html#bounding-box" id="ref-for-bounding-box②">bounding box</a> of the element to which the clipping path applies to  and the same width and height of this <span id="ref-for-bounding-box③">bounding box</span>. <a href="https://www.w3.org/TR/SVG/coords.html#Units">User coordinates</a> are sized equivalently to the CSS <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#px" id="ref-for-px②">px</a> unit.</p>
     </dl>
     <p>If attribute <a data-link-type="element-attr" href="#element-attrdef-mask-maskcontentunits" id="ref-for-element-attrdef-mask-maskcontentunits①">maskContentUnits</a> is not specified, then the effect is as if a value of <a class="css" data-link-type="maybe" href="#valdef-maskcontentunits-userspaceonuse" id="ref-for-valdef-maskcontentunits-userspaceonuse①">userSpaceOnUse</a> were specified.</p>
     <p>Animatable: yes.</p>
    <dt data-md><dfn class="dfn-paneled" data-dfn-for="mask" data-dfn-type="element-attr" data-export id="element-attrdef-mask-x"><code>x</code></dfn> = "<a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①">&lt;length-percentage></a>"
    <dd data-md>
     <p>The x-axis coordinate of one corner of the rectangle for the largest possible offscreen buffer.
If the attribute is not specified but at least one of the attributes <a data-link-type="element-attr" href="#element-attrdef-mask-y" id="ref-for-element-attrdef-mask-y⑤">y</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-width" id="ref-for-element-attrdef-mask-width⑤">width</a> or <a data-link-type="element-attr" href="#element-attrdef-mask-height" id="ref-for-element-attrdef-mask-height⑤">height</a> are specified, the effect is as if a value of <span class="css">-10%</span> were specified.</p>
     <p>Animatable: yes.</p>
    <dt data-md><dfn class="dfn-paneled" data-dfn-for="mask" data-dfn-type="element-attr" data-export id="element-attrdef-mask-y"><code>y</code></dfn> = "<a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②">&lt;length-percentage></a>"
    <dd data-md>
     <p>The y-axis coordinate of one corner of the rectangle for the largest possible offscreen buffer.
If the attribute is not specified but at least one of the attributes <a data-link-type="element-attr" href="#element-attrdef-mask-x" id="ref-for-element-attrdef-mask-x⑤">x</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-width" id="ref-for-element-attrdef-mask-width⑥">width</a> or <a data-link-type="element-attr" href="#element-attrdef-mask-height" id="ref-for-element-attrdef-mask-height⑥">height</a> are specified, the effect is as if a value of <span class="css">-10%</span> were specified.</p>
     <p>Animatable: yes.</p>
    <dt data-md><dfn class="dfn-paneled" data-dfn-for="mask" data-dfn-type="element-attr" data-export id="element-attrdef-mask-width"><code>width</code></dfn> = "<a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage③">&lt;length-percentage></a>"
    <dd data-md>
     <p>The width of the largest possible offscreen buffer. A negative value or a value of zero disables rendering of the element.
If the attribute is not specified but at least one of the attributes <a data-link-type="element-attr" href="#element-attrdef-mask-x" id="ref-for-element-attrdef-mask-x⑥">x</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-y" id="ref-for-element-attrdef-mask-y⑥">y</a> or <a data-link-type="element-attr" href="#element-attrdef-mask-height" id="ref-for-element-attrdef-mask-height⑦">height</a> are specified, the effect is as if a value of <span class="css">120%</span> were specified.</p>
     <p>Animatable: yes.</p>
    <dt data-md><dfn class="dfn-paneled" data-dfn-for="mask" data-dfn-type="element-attr" data-export id="element-attrdef-mask-height"><code>height</code></dfn> = "<a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage④">&lt;length-percentage></a>"
    <dd data-md>
     <p>The height of the largest possible offscreen buffer.
A negative value or a value of zero disables rendering of the element.
If the attribute is not specified but at least one of the attributes <a data-link-type="element-attr" href="#element-attrdef-mask-x" id="ref-for-element-attrdef-mask-x⑦">x</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-y" id="ref-for-element-attrdef-mask-y⑦">y</a> or <a data-link-type="element-attr" href="#element-attrdef-mask-width" id="ref-for-element-attrdef-mask-width⑦">width</a> are specified, the effect is as if a value of <span class="css">120%</span> were specified.</p>
     <p>Animatable: yes.</p>
   </dl>
   <p>If at least one of the attributes <a data-link-type="element-attr" href="#element-attrdef-mask-x" id="ref-for-element-attrdef-mask-x⑧">x</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-y" id="ref-for-element-attrdef-mask-y⑧">y</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-width" id="ref-for-element-attrdef-mask-width⑧">width</a> or <a data-link-type="element-attr" href="#element-attrdef-mask-height" id="ref-for-element-attrdef-mask-height⑧">height</a> are specified, the given object and the rectangle defined by <span id="ref-for-element-attrdef-mask-x⑨">x</span>, <span id="ref-for-element-attrdef-mask-y⑨">y</span>, <span id="ref-for-element-attrdef-mask-width⑨">width</span> and <span id="ref-for-element-attrdef-mask-height⑨">height</span> establish a current clipping path. The rendered content of the mask must be clipped by this current clipping path.</p>
   <p>CSS properties inherit into the <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask②①">mask</a> element from its ancestors; properties do <em>not</em> inherit from the element referencing the <span id="ref-for-elementdef-mask②②">mask</span> element.</p>
   <p><a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask②③">mask</a> elements are never rendered directly; their only usage is as something that can be referenced using the <a class="property" data-link-type="propdesc" href="#propdef-mask" id="ref-for-propdef-mask①⓪">mask</a> property. The <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity⑦">opacity</a>, <a class="property" data-link-type="propdesc" href="https://drafts.fxtf.org/filter-effects-1/#propdef-filter" id="ref-for-propdef-filter②">filter</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display⑥">display</a> properties do not apply to the <span id="ref-for-elementdef-mask②④">mask</span> element; thus, <span id="ref-for-elementdef-mask②⑤">mask</span> elements are not directly rendered even if the <span class="property" id="ref-for-propdef-display⑦">display</span> property is set to a value other than <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-none" id="ref-for-valdef-display-none②">none</a>, and <span id="ref-for-elementdef-mask②⑥">mask</span> elements are available for referencing even when the <span class="property" id="ref-for-propdef-display⑧">display</span> property on the <span id="ref-for-elementdef-mask②⑦">mask</span> element or any of its ancestors is set to <span class="css" id="ref-for-valdef-display-none③">none</span>.</p>
   <h3 class="heading settled" data-level="9.2" id="the-mask-type"><span class="secno">9.2. </span><span class="content">Mask Source Interpretation: the <a class="property" data-link-type="propdesc" href="#propdef-mask-type" id="ref-for-propdef-mask-type④">mask-type</a> property</span><a class="self-link" href="#the-mask-type"></a></h3>
   <table class="def propdef" data-link-for-hint="mask-type">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-type">mask-type</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">luminance <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②③">|</a> alpha
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>luminance
     <tr>
      <th>Applies to:
      <td><a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask②⑧">mask</a> elements
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-mask-type" id="ref-for-propdef-mask-type⑤">mask-type</a> property defines whether the content of the <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask②⑨">mask</a> element is treated as as luminance mask or alpha mask, as described in <a href="#MaskValues">Calculating mask values</a>.</p>
   <p>Values have the following meanings:</p>
   <dl>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-type" data-dfn-type="value" data-export id="valdef-mask-type-luminance">luminance</dfn>
    <dd data-md>
     <p>Indicates that the luminance values of the mask should be used.</p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-type" data-dfn-type="value" data-export id="valdef-mask-type-alpha">alpha</dfn>
    <dd data-md>
     <p>Indicates that the alpha values of the mask should be used.</p>
   </dl>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-mask-type" id="ref-for-propdef-mask-type⑥">mask-type</a> property allows the author of the <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask③⓪">mask</a> element to specify the preferred masking mode. However, the author can override this preference by setting the <a class="property" data-link-type="propdesc" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode⑧">mask-mode</a> value to something different than <a class="css" data-link-type="maybe" href="#valdef-mask-mode-match-source" id="ref-for-valdef-mask-mode-match-source">match-source</a> on the masked content.</p>
   <div class="example" id="example-c0f95fbd">
    <a class="self-link" href="#example-c0f95fbd"></a> In the following example the computed value of <a class="property" data-link-type="propdesc" href="#propdef-mask-type" id="ref-for-propdef-mask-type⑦">mask-type</a> is <a class="css" data-link-type="maybe" href="#valdef-mask-type-luminance" id="ref-for-valdef-mask-type-luminance①">luminance</a> and the computed value of <a class="property" data-link-type="propdesc" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode⑨">mask-mode</a> is <a class="css" data-link-type="maybe" href="#valdef-mask-mode-match-source" id="ref-for-valdef-mask-mode-match-source①">match-source</a>. The UA must follow the preferred masking mode defined on the <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask③①">mask</a> element. 
<pre><code class="highlight"><c- p>&lt;</c-><c- f>svg</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>mask</c-> <c- e>style</c-><c- o>=</c-><c- s>"mask-type: luminance;"</c-> <c- e>id</c-><c- o>=</c-><c- s>"mask"</c-><c- p>></c->
    ...
  <c- p>&lt;/</c-><c- f>mask</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>svg</c-><c- p>></c->

<c- p>&lt;</c-><c- f>p</c-> <c- e>style</c-><c- o>=</c-><c- s>"mask-image: url(#mask); mask-mode: auto;"</c-><c- p>></c->
  This is the masked content.
<c- p>&lt;/</c-><c- f>p</c-><c- p>></c->
</code></pre>
    <p>In the next example the computed value of <a class="property" data-link-type="propdesc" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode①⓪">mask-mode</a> is <a class="css" data-link-type="maybe" href="#valdef-mask-mode-alpha" id="ref-for-valdef-mask-mode-alpha①">alpha</a> and overrides the preference on the <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask③②">mask</a> element that is computed to <a class="css" data-link-type="maybe" href="#valdef-mask-type-luminance" id="ref-for-valdef-mask-type-luminance②">luminance</a>. The <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image①⑧">mask layer image</a> is used as an alpha mask.</p>
    <p></p>
<pre><code class="highlight">lt;svg>
 <c- p>&lt;</c-><c- f>mask</c-> <c- e>style</c-><c- o>=</c-><c- s>"mask-type: luminance;"</c-> <c- e>id</c-><c- o>=</c-><c- s>"mask2"</c-><c- p>></c->
   ...
 <c- p>&lt;/</c-><c- f>mask</c-><c- p>></c->
lt;/svg>

lt;p style="mask-image: url(#mask2); mask-mode: alpha;">
 This is the masked content.
lt;/p>
</code></pre>
   </div>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-mask-type" id="ref-for-propdef-mask-type⑧">mask-type</a> property is a <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermPresentationAttribute">presentation attribute</a> for SVG elements.</p>
   <h2 class="heading settled" data-level="10" id="priv-sec"><span class="secno">10. </span><span class="content">Privacy and Security Considerations</span><a class="self-link" href="#priv-sec"></a></h2>
   <p>It is important that the timing to the masking operations is independent of the source and destination pixel. Masking operations must be implemented in such a way that they always take the same amount of time regardless of the pixel values. If this rule is not followed, an attacker could infer information and mount a timing attack.</p>
   <p>A timing attack is a method of obtaining information about content that is otherwise protected, based on studying the amount of time it takes for an operation to occur. If, for example, red pixels took longer to draw than green pixels, one might be able to reconstruct a rough image of the element being rendered, without ever having access to the content of the element.</p>
   <p><a class="production css" data-link-type="type" href="#typedef-mask-source" id="ref-for-typedef-mask-source④">&lt;mask-source></a>s and <a class="production css" data-link-type="type" href="#typedef-clip-source" id="ref-for-typedef-clip-source①">&lt;clip-source></a>s have special requirements on fetching resources.</p>
   <p>User agents must use the <a href="https://fetch.spec.whatwg.org/#main-fetch">potentially CORS-enabled fetch</a> method defined by the <a data-link-type="biblio" href="#biblio-fetch">[FETCH]</a> specification for all <a class="production css" data-link-type="type" href="#typedef-mask-source" id="ref-for-typedef-mask-source⑤">&lt;mask-source></a>, <a class="production css" data-link-type="type" href="#typedef-clip-source" id="ref-for-typedef-clip-source②">&lt;clip-source></a> and <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image⑦">&lt;image></a> values on the <a class="property" data-link-type="propdesc" href="#propdef-mask-image" id="ref-for-propdef-mask-image①⑥">mask-image</a>, <a class="property" data-link-type="propdesc" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source①⑥">mask-border-source</a> and <a class="property" data-link-type="propdesc" href="#propdef-clip-path" id="ref-for-propdef-clip-path①⑥">clip-path</a> properties. When fetching, user agents must use “Anonymous” mode, set the referrer source to the stylesheet’s URL and set the origin to the URL of the containing document. If this results in network errors, the effect is as if the value <span class="css">none</span> had been specified.</p>
   <h2 class="no-num heading settled" id="clip-property"><span class="content">Appendix A: The deprecated <a class="property" data-link-type="propdesc" href="#propdef-clip" id="ref-for-propdef-clip③">clip</a> property</span><a class="self-link" href="#clip-property"></a></h2>
   <table class="def propdef" data-link-for-hint="clip">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-clip">clip</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="css" data-link-type="maybe" href="#funcdef-clip-rect" id="ref-for-funcdef-clip-rect">rect()</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②④">|</a> <span class="css">auto</span>
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto
     <tr>
      <th>Applies to:
      <td>Absolutely positioned elements. In SVG, it applies to <a href="https://www.w3.org/TR/SVG/coords.html#EstablishingANewViewport">elements which establish a new viewport</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/pservers.html#elementdef-pattern" id="ref-for-elementdef-pattern①">pattern</a> elements and <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask③③">mask</a> elements.
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>as specified
     <tr>
      <th>Canonical order:
      <td>per grammar
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>as <a href="http://dev.w3.org/csswg/css3-transitions/#animtype-rect">rectangle</a>
     <tr>
      <th>Media:
      <td>visual
   </table>
   <p>With this specification the <a class="property" data-link-type="propdesc" href="#propdef-clip" id="ref-for-propdef-clip④">clip</a> property is deprecated. Authors are encouraged to use the <a class="property" data-link-type="propdesc" href="#propdef-clip-path" id="ref-for-propdef-clip-path①⑦">clip-path</a> property instead. UAs must support the <span class="property" id="ref-for-propdef-clip⑤">clip</span> property.</p>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-clip" id="ref-for-propdef-clip⑥">clip</a> property applies only to absolutely positioned elements. In SVG, it applies to <a href="https://www.w3.org/TR/SVG/coords.html#EstablishingANewViewport">elements which establish a new viewport</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/pservers.html#elementdef-pattern" id="ref-for-elementdef-pattern②">pattern</a> elements and <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask③④">mask</a> elements. Values have the following meanings:</p>
   <dl>
    <dt data-md>auto
    <dd data-md>
     <p>The element does not clip.</p>
    <p></p>
    <dt data-md><dfn class="dfn-paneled css" data-dfn-for="clip" data-dfn-type="function" data-export id="funcdef-clip-rect">rect()</dfn> = rect( <a class="production css" data-link-type="type" href="#typedef-clip-top" id="ref-for-typedef-clip-top">&lt;top></a>, <a class="production css" data-link-type="type" href="#typedef-clip-right" id="ref-for-typedef-clip-right">&lt;right></a>, <a class="production css" data-link-type="type" href="#typedef-clip-bottom" id="ref-for-typedef-clip-bottom">&lt;bottom></a>, <a class="production css" data-link-type="type" href="#typedef-clip-left" id="ref-for-typedef-clip-left">&lt;left></a> )
    <dd data-md>
     <p><a class="production css" data-link-type="type" href="#typedef-clip-top" id="ref-for-typedef-clip-top①">&lt;top></a> and <a class="production css" data-link-type="type" href="#typedef-clip-bottom" id="ref-for-typedef-clip-bottom①">&lt;bottom></a> specify offsets from the top border edge of the box, and <a class="production css" data-link-type="type" href="#typedef-clip-right" id="ref-for-typedef-clip-right①">&lt;right></a>, and <a class="production css" data-link-type="type" href="#typedef-clip-left" id="ref-for-typedef-clip-left①">&lt;left></a> specify offsets from the left border edge of the box. Authors should separate offset values with commas. User agents must support separation with commas, but may also support separation without commas (but not a combination), because a previous revision of this specification was ambiguous in this respect.</p>
     <p><dfn class="dfn-paneled css" data-dfn-for="clip" data-dfn-type="type" data-export id="typedef-clip-top">&lt;top></dfn>, <dfn class="dfn-paneled css" data-dfn-for="clip" data-dfn-type="type" data-export id="typedef-clip-right">&lt;right></dfn>, <dfn class="dfn-paneled css" data-dfn-for="clip" data-dfn-type="type" data-export id="typedef-clip-bottom">&lt;bottom></dfn>, and <dfn class="dfn-paneled css" data-dfn-for="clip" data-dfn-type="type" data-export id="typedef-clip-left">&lt;left></dfn> may either have a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value④" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> value or <span class="css">auto</span>. Negative lengths are permitted. The value <span class="css">auto</span> means that a given edge of the clipping region will be the same as the edge of the element’s generated border box (i.e., <span class="css">auto</span> means the same as <span class="css">0</span> for <a class="production css" data-link-type="type" href="#typedef-clip-top" id="ref-for-typedef-clip-top②">&lt;top></a> and <a class="production css" data-link-type="type" href="#typedef-clip-left" id="ref-for-typedef-clip-left②">&lt;left></a>, the same as the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value⑤">used value</a> of the height plus the sum of vertical padding and border widths for <a class="production css" data-link-type="type" href="#typedef-clip-bottom" id="ref-for-typedef-clip-bottom②">&lt;bottom></a>, and the same as the used value of the width plus the sum of the horizontal padding and border widths for <a class="production css" data-link-type="type" href="#typedef-clip-right" id="ref-for-typedef-clip-right②">&lt;right></a>, such that four <span class="css">auto</span> values result in the clipping region being the same as the element’s border box).</p>
     <p>When coordinates are rounded to pixel coordinates, care should be taken that no pixels remain visible when <a class="production css" data-link-type="type" href="#typedef-clip-left" id="ref-for-typedef-clip-left③">&lt;left></a> and <a class="production css" data-link-type="type" href="#typedef-clip-right" id="ref-for-typedef-clip-right③">&lt;right></a> have the same value (or <a class="production css" data-link-type="type" href="#typedef-clip-top" id="ref-for-typedef-clip-top③">&lt;top></a> and <a class="production css" data-link-type="type" href="#typedef-clip-bottom" id="ref-for-typedef-clip-bottom③">&lt;bottom></a> have the same value), and conversely that no pixels within the element’s border box remain hidden when these values are <span class="css">auto</span>.</p>
   </dl>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-clip" id="ref-for-propdef-clip⑦">clip</a> property is a <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermPresentationAttribute">presentation attribute</a> for SVG elements.</p>
   <div class="example" id="example-550001e5">
    <a class="self-link" href="#example-550001e5"></a> Example: The following two rules: 
<pre><code class="highlight"><c- f>p#one </c-><c- p>{</c-> <c- k>clip</c-><c- p>:</c-> <c- nf>rect</c-><c- p>(</c-><c- m>5</c-><c- l>px</c-><c- p>,</c-> <c- m>40</c-><c- l>px</c-><c- p>,</c-> <c- m>45</c-><c- l>px</c-><c- p>,</c-> <c- m>5</c-><c- l>px</c-><c- p>);</c-> <c- p>}</c->
<c- f>p#two </c-><c- p>{</c-> <c- k>clip</c-><c- p>:</c-> <c- nf>rect</c-><c- p>(</c-><c- m>5</c-><c- l>px</c-><c- p>,</c-> <c- m>55</c-><c- l>px</c-><c- p>,</c-> <c- m>45</c-><c- l>px</c-><c- p>,</c-> <c- m>5</c-><c- l>px</c-><c- p>);</c-> <c- p>}</c->
</code></pre>
    <p>and assuming both Ps are 50 by 55 pixel, will create, respectively, the rectangular clipping regions delimited by the dashed lines in the following illustrations:</p>
    <div class="figure">
      <img alt="Values for rect shape" height="300" src="images/clip.svg" width="580"> 
     <p class="caption">This diagram illustrates two block boxes, one next to the other, with rectangular clipping regions of different dimensions. (See <a href="https://www.w3.org/TR/CSS2/images/longdesc/clip-desc.html">long description</a>.)</p>
    </div>
   </div>
   <h2 class="no-num heading settled" id="compute-stroke-bounding-box"><span class="content">Appendix B: Compute stroke bounding box</span><a class="self-link" href="#compute-stroke-bounding-box"></a></h2>
   <p>The algorithm to compute the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="stroke-bounding-box">stroke bounding box</dfn> is as follows, depending on the type of <var>element</var>:</p>
   <dl class="switch">
    <dt data-md>a <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#graphics-element" id="ref-for-graphics-element②②">graphics element</a> without <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-use" id="ref-for-elementdef-use②⓪">use</a> or <a data-link-type="element" href="https://svgwg.org/svg2-draft/embedded.html#elementdef-image" id="ref-for-elementdef-image①">image</a>
    <dt data-md>an <a data-link-type="element" href="https://svgwg.org/svg2-draft/linking.html#elementdef-a" id="ref-for-elementdef-a①">a</a> element with a <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/text.html#TermTextContentElement" id="ref-for-TermTextContentElement">text content element</a>
    <dd data-md>
     <ol class="algorithm">
      <li data-md>
       <p>Let <var>box</var> be a rectangle initialized to the <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/coords.html#TermObjectBoundingBox" id="ref-for-TermObjectBoundingBox⑤">object bounding box</a> of <var>element</var>.</p>
      <li data-md>
       <p>If the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value⑥">used value</a> of <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeWidthProperty" id="ref-for-StrokeWidthProperty③">stroke-width</a> &lt;= 0 or the used value of <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeProperty" id="ref-for-StrokeProperty③">stroke</a> is <span class="css">none</span> return <var>box</var>.</p>
      <li data-md>
       <p>Let <var>delta</var> be the inflation value initialized to the half of the <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeWidthProperty" id="ref-for-StrokeWidthProperty④">stroke-width</a>.</p>
      <li data-md>
       <p>If <var>element</var> is not <a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-rect" id="ref-for-elementdef-rect②">rect</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-ellipse" id="ref-for-elementdef-ellipse②">ellipse</a>, <a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-circle" id="ref-for-elementdef-circle④">circle</a> or <a data-link-type="element" href="https://svgwg.org/svg2-draft/embedded.html#elementdef-image" id="ref-for-elementdef-image②">image</a> just follow one of the following conditions in the order they apply:</p>
       <dl class="switch">
        <dt data-md>the used value for <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeLinejoinProperty" id="ref-for-StrokeLinejoinProperty②">stroke-linejoin</a> is <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/fill-stroke-3/#valdef-stroke-linejoin-miter" id="ref-for-valdef-stroke-linejoin-miter">miter</a>
        <dd data-md>
         <ol>
          <li data-md>
           <p>Let <var>miter</var> be the used value of <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeMiterlimitProperty" id="ref-for-StrokeMiterlimitProperty②">stroke-miterlimit</a>.</p>
          <li data-md>
           <p>If <var>miter</var> is smaller than the square root of 2 and if the used value for <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeLinecapProperty" id="ref-for-StrokeLinecapProperty②">stroke-linecap</a> is <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/fill-stroke-3/#valdef-stroke-linecap-square" id="ref-for-valdef-stroke-linecap-square">square</a>, multiply <var>delta</var> with the square root of 2. Otherwise, multiply <var>delta</var> with <var>miter</var>.</p>
         </ol>
        <dt data-md>the used value for <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeLinecapProperty" id="ref-for-StrokeLinecapProperty③">stroke-linecap</a> is <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/fill-stroke-3/#valdef-stroke-linecap-square" id="ref-for-valdef-stroke-linecap-square①">square</a>
        <dd data-md>
         <ol>
          <li data-md>
           <p>Multiply <var>delta</var> with the square root of 2.</p>
         </ol>
       </dl>
      <li data-md>
       <p>Inflate <var>box</var> with the value of <var>delta</var>.</p>
      <li data-md>
       <p>Return <var>box</var>.</p>
     </ol>
     <p class="note" role="note"><span>Note:</span> The values of the <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeOpacityProperty" id="ref-for-StrokeOpacityProperty②">stroke-opacity</a>, <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeDasharrayProperty" id="ref-for-StrokeDasharrayProperty②">stroke-dasharray</a> and <a class="property" data-link-type="propdesc" href="https://svgwg.org/svg2-draft/painting.html#StrokeDashoffsetProperty" id="ref-for-StrokeDashoffsetProperty②">stroke-dashoffset</a> do not affect the calculation of the stroke bounding box.</p>
    <dt data-md>a <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#container-element" id="ref-for-container-element①⑧">container element</a>
    <dt data-md><a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-use" id="ref-for-elementdef-use②①">use</a>
    <dd data-md>
     <ol class="algorithm">
      <li data-md>
       <p>Let <var>parent</var> be the <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#container-element" id="ref-for-container-element①⑨">container element</a> if it is one, or the root of the <a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-use" id="ref-for-elementdef-use②②">use</a> element’s shadow tree otherwise.</p>
      <li data-md>
       <p>For each child <var>child</var> of <var>parent</var></p>
       <ol>
        <li data-md>
         <p>Invoke the stroke bounding box algorithm with <var>child</var>.</p>
        <li data-md>
         <p>Let <var>childBox</var> be the returned box value of the invoked algorithm.</p>
        <li data-md>
         <p>Map <var>childBox</var> from the coordinate space of <var>child</var> to the coordinate space of <var>parent</var>.</p>
       </ol>
      <li data-md>
       <p>Let <var>box</var> be the union of all <var>childBox</var>es.</p>
      <li data-md>
       <p>Return <var>box</var>.</p>
     </ol>
    <dt data-md><a data-link-type="element" href="https://svgwg.org/svg2-draft/embedded.html#elementdef-image" id="ref-for-elementdef-image③">image</a>
    <dd data-md>
     <ol class="algorithm">
      <li data-md>
       <p>Return the <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/coords.html#TermObjectBoundingBox" id="ref-for-TermObjectBoundingBox⑥">object bounding box</a> of <var>element</var>.</p>
     </ol>
   </dl>
   <p class="note" role="note"><span>Note:</span> A future version of the SVG specification may override this section.</p>
   <h2 class="no-num heading settled" id="DOMInterfaces"><span class="content">Appendix C: DOM interfaces</span><a class="self-link" href="#DOMInterfaces"></a></h2>
   <h3 class="heading settled" id="InterfaceSVGClipPathElement"><span class="content">Interface SVGClipPathElement</span><a class="self-link" href="#InterfaceSVGClipPathElement"></a></h3>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="svgclippathelement"><code>SVGClipPathElement</code></dfn> interface corresponds to the <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath③①">clipPath</a> element.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="#svgclippathelement" id="ref-for-svgclippathelement"><c- g>SVGClipPathElement</c-></a> : <a class="n" data-link-type="idl-name" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGElement" id="ref-for-InterfaceSVGElement"><c- n>SVGElement</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedEnumeration" id="ref-for-InterfaceSVGAnimatedEnumeration"><c- n>SVGAnimatedEnumeration</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedEnumeration" href="#dom-svgclippathelement-clippathunits" id="ref-for-dom-svgclippathelement-clippathunits"><c- g>clipPathUnits</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://svgwg.org/svg2-draft/coords.html#InterfaceSVGAnimatedTransformList" id="ref-for-InterfaceSVGAnimatedTransformList"><c- n>SVGAnimatedTransformList</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedTransformList" href="#dom-svgclippathelement-transform" id="ref-for-dom-svgclippathelement-transform"><c- g>transform</c-></a>;
};
</pre>
   <div>
    <dl>
     <dt data-md>Attributes:
     <dd data-md>
      <dl>
       <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="SVGClipPathElement" data-dfn-type="attribute" data-export id="dom-svgclippathelement-clippathunits"><code>clipPathUnits</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedEnumeration" id="ref-for-InterfaceSVGAnimatedEnumeration①">SVGAnimatedEnumeration</a>, readonly</span>
       <dd data-md>
        <p>Corresponds to attribute <a data-link-type="element-attr" href="#element-attrdef-clippath-clippathunits" id="ref-for-element-attrdef-clippath-clippathunits②">clipPathUnits</a> on the given <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath③②">clipPath</a> element. Takes one of the constants defined in <a class="idl-code" data-link-type="interface" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGUnitTypes" id="ref-for-InterfaceSVGUnitTypes">SVGUnitTypes</a>.</p>
       <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="SVGClipPathElement" data-dfn-type="attribute" data-export id="dom-svgclippathelement-transform"><code>transform</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://svgwg.org/svg2-draft/coords.html#InterfaceSVGAnimatedTransformList" id="ref-for-InterfaceSVGAnimatedTransformList①">SVGAnimatedTransformList</a>, readonly</span>
       <dd data-md>
        <p>Corresponds to presentation attribute <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-transforms-1/#propdef-transform" id="ref-for-propdef-transform">transform</a> on the given element.</p>
      </dl>
    </dl>
   </div>
   <h3 class="heading settled" id="InterfaceSVGMaskElement"><span class="content">Interface SVGMaskElement</span><a class="self-link" href="#InterfaceSVGMaskElement"></a></h3>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="svgmaskelement"><code>SVGMaskElement</code></dfn> interface corresponds to the <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask③⑤">mask</a> element.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="#svgmaskelement" id="ref-for-svgmaskelement"><c- g>SVGMaskElement</c-></a> : <a class="n" data-link-type="idl-name" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGElement" id="ref-for-InterfaceSVGElement①"><c- n>SVGElement</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedEnumeration" id="ref-for-InterfaceSVGAnimatedEnumeration②"><c- n>SVGAnimatedEnumeration</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedEnumeration" href="#dom-svgmaskelement-maskunits" id="ref-for-dom-svgmaskelement-maskunits"><c- g>maskUnits</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedEnumeration" id="ref-for-InterfaceSVGAnimatedEnumeration③"><c- n>SVGAnimatedEnumeration</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedEnumeration" href="#dom-svgmaskelement-maskcontentunits" id="ref-for-dom-svgmaskelement-maskcontentunits"><c- g>maskContentUnits</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedLength" id="ref-for-InterfaceSVGAnimatedLength"><c- n>SVGAnimatedLength</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedLength" href="#dom-svgmaskelement-x" id="ref-for-dom-svgmaskelement-x"><c- g>x</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedLength" id="ref-for-InterfaceSVGAnimatedLength①"><c- n>SVGAnimatedLength</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedLength" href="#dom-svgmaskelement-y" id="ref-for-dom-svgmaskelement-y"><c- g>y</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedLength" id="ref-for-InterfaceSVGAnimatedLength②"><c- n>SVGAnimatedLength</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedLength" href="#dom-svgmaskelement-width" id="ref-for-dom-svgmaskelement-width"><c- g>width</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedLength" id="ref-for-InterfaceSVGAnimatedLength③"><c- n>SVGAnimatedLength</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedLength" href="#dom-svgmaskelement-height" id="ref-for-dom-svgmaskelement-height"><c- g>height</c-></a>;
};
</pre>
   <div>
    <dl>
     <dt data-md>Attributes:
     <dd data-md>
      <dl>
       <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="SVGMaskElement" data-dfn-type="attribute" data-export id="dom-svgmaskelement-maskunits"><code>maskUnits</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedEnumeration" id="ref-for-InterfaceSVGAnimatedEnumeration④">SVGAnimatedEnumeration</a>, readonly</span>
       <dd data-md>
        <p>Corresponds to attribute <a data-link-type="element-attr" href="#element-attrdef-mask-maskunits" id="ref-for-element-attrdef-mask-maskunits③">maskUnits</a> on the given <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask③⑥">mask</a> element. Takes one of the constants defined in <a class="idl-code" data-link-type="interface" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGUnitTypes" id="ref-for-InterfaceSVGUnitTypes①">SVGUnitTypes</a>.</p>
       <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="SVGMaskElement" data-dfn-type="attribute" data-export id="dom-svgmaskelement-maskcontentunits"><code>maskContentUnits</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedEnumeration" id="ref-for-InterfaceSVGAnimatedEnumeration⑤">SVGAnimatedEnumeration</a>, readonly</span>
       <dd data-md>
        <p>Corresponds to attribute <a data-link-type="element-attr" href="#element-attrdef-mask-maskcontentunits" id="ref-for-element-attrdef-mask-maskcontentunits②">maskContentUnits</a> on the given <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask③⑦">mask</a> element. Takes one of the constants defined in <a class="idl-code" data-link-type="interface" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGUnitTypes" id="ref-for-InterfaceSVGUnitTypes②">SVGUnitTypes</a>.</p>
       <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="SVGMaskElement" data-dfn-type="attribute" data-export id="dom-svgmaskelement-x"><code>x</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedLength" id="ref-for-InterfaceSVGAnimatedLength④">SVGAnimatedLength</a>, readonly</span>
       <dd data-md>
        <p>Corresponds to attribute <a data-link-type="element-attr" href="#element-attrdef-mask-x" id="ref-for-element-attrdef-mask-x①⓪">x</a> on the given <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask③⑧">mask</a> element.</p>
       <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="SVGMaskElement" data-dfn-type="attribute" data-export id="dom-svgmaskelement-y"><code>y</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedLength" id="ref-for-InterfaceSVGAnimatedLength⑤">SVGAnimatedLength</a>, readonly</span>
       <dd data-md>
        <p>Corresponds to attribute <a data-link-type="element-attr" href="#element-attrdef-mask-y" id="ref-for-element-attrdef-mask-y①⓪">y</a> on the given <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask③⑨">mask</a> element.</p>
       <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="SVGMaskElement" data-dfn-type="attribute" data-export id="dom-svgmaskelement-width"><code>width</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedLength" id="ref-for-InterfaceSVGAnimatedLength⑥">SVGAnimatedLength</a>, readonly</span>
       <dd data-md>
        <p>Corresponds to attribute <a data-link-type="element-attr" href="#element-attrdef-mask-width" id="ref-for-element-attrdef-mask-width①⓪">width</a> on the given <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask④⓪">mask</a> element.</p>
       <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="SVGMaskElement" data-dfn-type="attribute" data-export id="dom-svgmaskelement-height"><code>height</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedLength" id="ref-for-InterfaceSVGAnimatedLength⑦">SVGAnimatedLength</a>, readonly</span>
       <dd data-md>
        <p>Corresponds to attribute <a data-link-type="element-attr" href="#element-attrdef-mask-height" id="ref-for-element-attrdef-mask-height①⓪">height</a> on the given <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask④①">mask</a> element.</p>
      </dl>
    </dl>
   </div>
   <h2 class="no-num heading settled" id="changes"><span class="content">Changes since last publication</span><a class="self-link" href="#changes"></a></h2>
   <p>The following changes were made since the <a href="http://www.w3.org/TR/2014/CR-css-masking-1-20140826/">26 August 2014 Candidate Recommendation</a>.</p>
   <ul>
    <li data-md>
     <p>Allowed the <a class="production" data-link-type="propdesc" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode①①">&lt;'mask-mode'></a> value in the <a class="property" data-link-type="propdesc" href="#propdef-mask" id="ref-for-propdef-mask①①">mask</a> shorthand to appear anywhere other than between <a class="production" data-link-type="propdesc" href="#propdef-mask-position" id="ref-for-propdef-mask-position⑤">&lt;'mask-position'></a> and <a class="production" data-link-type="propdesc" href="#propdef-mask-size" id="ref-for-propdef-mask-size④">&lt;'mask-size'></a>.</p>
    <li data-md>
     <p>Removed Implements SVGUnitTypes on clipPath and mask elements.</p>
    <li data-md>
     <p>Apply properties that apply to all graphics elements to the use element as well.</p>
    <li data-md>
     <p>Change initial value of <a class="property" data-link-type="propdesc" href="#propdef-mask-position" id="ref-for-propdef-mask-position⑥">mask-position</a> to <span class="css">0% 0%</span> and of <a class="property" data-link-type="propdesc" href="#propdef-mask-repeat" id="ref-for-propdef-mask-repeat③">mask-repeat</a> to <span class="css">repeat</span>.</p>
    <li data-md>
     <p>Remove <var>margin-box</var> as possible value from <a class="property" data-link-type="propdesc" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin⑨">mask-origin</a> and <a class="property" data-link-type="propdesc" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip⑨">mask-clip</a>.</p>
    <li data-md>
     <p>Clarify that <a class="property" data-link-type="propdesc" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip①⓪">mask-clip</a> has no affect on <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image①⑨">mask layer image</a>s that reference a <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask④②">mask</a> element.</p>
    <li data-md>
     <p>Clarify <a class="property" data-link-type="propdesc" href="#propdef-mask" id="ref-for-propdef-mask①②">mask</a> shorthand behavior on appearance of one <a class="production css" data-link-type="type" href="#typedef-geometry-box" id="ref-for-typedef-geometry-box①①">&lt;geometry-box></a> and the <a class="css" data-link-type="maybe" href="#valdef-mask-clip-no-clip" id="ref-for-valdef-mask-clip-no-clip③">no-clip</a> keyword.</p>
    <li data-md>
     <p><a class="property" data-link-type="propdesc" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode①②">mask-mode</a> on a <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image②⓪">mask layer image</a> that is a reference to a <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask④③">mask</a> element with a value of <a class="css" data-link-type="maybe" href="#valdef-mask-mode-match-source" id="ref-for-valdef-mask-mode-match-source②">match-source</a> should take the value of the <a class="property" data-link-type="propdesc" href="#propdef-mask-type" id="ref-for-propdef-mask-type⑨">mask-type</a> property on this <span id="ref-for-elementdef-mask④④">mask</span> element.</p>
    <li data-md>
     <p>Mapping of boxes for SVG elements with and without associated CSS layout box changed to match mapping in Fill and Stroke spec.</p>
    <li data-md>
     <p>Editorial changes.</p>
   </ul>
   <p>The following changes were made since the <a href="https://www.w3.org/TR/2014/WD-css-masking-1-20140522/">22 May 2014 Working Draft</a>.</p>
   <ul>
    <li data-md>
     <p>Change the inital value of <a class="property" data-link-type="propdesc" href="#propdef-mask-size" id="ref-for-propdef-mask-size⑤">mask-size</a> from border-box to auto.</p>
   </ul>
   <p>The following changes were made since the <a href="https://www.w3.org/TR/2014/WD-css-masking-1-20140213/">13 February 2014 Working Draft</a>.</p>
   <ul>
    <li data-md>
     <p>Renamed mask-box* properties and terms to mask-border*.</p>
    <li data-md>
     <p>Added support for multiple mask layers. (Similar to multiple background layers for <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background" id="ref-for-propdef-background">background</a>.)</p>
    <li data-md>
     <p>Added the <a class="property" data-link-type="propdesc" href="#propdef-mask-composite" id="ref-for-propdef-mask-composite⑥">mask-composite</a> property to control compositing of multiple <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image②①">mask layer images</a> with the keywords <a class="css" data-link-type="maybe" href="#valdef-mask-composite-add" id="ref-for-valdef-mask-composite-add②">add</a>, <a class="css" data-link-type="maybe" href="#valdef-mask-composite-subtract" id="ref-for-valdef-mask-composite-subtract①">subtract</a>, <a class="css" data-link-type="maybe" href="#valdef-mask-composite-intersect" id="ref-for-valdef-mask-composite-intersect①">intersect</a> and <a class="css" data-link-type="maybe" href="#valdef-mask-composite-exclude" id="ref-for-valdef-mask-composite-exclude③">exclude</a>.</p>
    <li data-md>
     <p><a class="property" data-link-type="propdesc" href="#propdef-mask-border-slice" id="ref-for-propdef-mask-border-slice⑤">mask-border-slice</a> without keyword <a class="css" data-link-type="maybe" href="#valdef-mask-border-slice-fill" id="ref-for-valdef-mask-border-slice-fill">fill</a> does not clip middle piece of content anymore. Changed initial value from <span class="css">0 fill</span> to <span class="css">0</span>.</p>
    <li data-md>
     <p>Better description for <a class="property" data-link-type="propdesc" href="#propdef-clip-rule" id="ref-for-propdef-clip-rule①⓪">clip-rule</a>, <a class="property" data-link-type="propdesc" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode①③">mask-mode</a> and <a class="property" data-link-type="propdesc" href="#propdef-mask-type" id="ref-for-propdef-mask-type①⓪">mask-type</a>.</p>
    <li data-md>
     <p>Rename <a class="css" data-link-type="maybe" href="#valdef-mask-border-slice-fill" id="ref-for-valdef-mask-border-slice-fill①">fill</a> and <span class="css">stroke</span> keywords to <a class="css" data-link-type="maybe" href="#valdef-clip-path-fill-box" id="ref-for-valdef-clip-path-fill-box②">fill-box</a> and <a class="css" data-link-type="maybe" href="#valdef-clip-path-stroke-box" id="ref-for-valdef-clip-path-stroke-box②">stroke-box</a>.</p>
    <li data-md>
     <p>Added definition for <a data-link-type="dfn" href="#stroke-bounding-box" id="ref-for-stroke-bounding-box③">stroke bounding box</a>.</p>
    <li data-md>
     <p>Better differentiation between mask images: <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image②②">mask layer image</a> and <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image①⑥">mask border image</a>.</p>
   </ul>
   <p>The following changes were made since the <a href="https://www.w3.org/TR/2013/WD-css-masking-1-20131029/">29 October 2013 Last Call Working Draft</a>.</p>
   <ul>
    <li data-md>
     <p>Remove note that a future version of the spec will allow controlling hit testing on clipping.</p>
    <li data-md>
     <p>Changed order of sections within the document.</p>
    <li data-md>
     <p>Make clear that the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value⑦">used value</a> of the properties <a class="property" data-link-type="propdesc" href="#propdef-mask-image" id="ref-for-propdef-mask-image①⑦">mask-image</a>, <a class="property" data-link-type="propdesc" href="#propdef-mask-repeat" id="ref-for-propdef-mask-repeat④">mask-repeat</a>, <a class="property" data-link-type="propdesc" href="#propdef-mask-position" id="ref-for-propdef-mask-position⑦">mask-position</a>, <a class="property" data-link-type="propdesc" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip①①">mask-clip</a>, <a class="property" data-link-type="propdesc" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin①⓪">mask-origin</a> and <a class="property" data-link-type="propdesc" href="#propdef-mask-size" id="ref-for-propdef-mask-size⑥">mask-size</a> must be ignored for <a class="production css" data-link-type="type" href="#typedef-mask-source" id="ref-for-typedef-mask-source⑥">&lt;mask-source></a>, not the properties.</p>
    <li data-md>
     <p>"Animatable" section of <a class="property" data-link-type="propdesc" href="#propdef-mask-size" id="ref-for-propdef-mask-size⑦">mask-size</a>, <a class="property" data-link-type="propdesc" href="#propdef-mask-position" id="ref-for-propdef-mask-position⑧">mask-position</a> described as repeatable list of lists. Changed to a single list.</p>
    <li data-md>
     <p>Computed value of <a class="property" data-link-type="propdesc" href="#propdef-mask-repeat" id="ref-for-propdef-mask-repeat⑤">mask-repeat</a> and <a class="property" data-link-type="propdesc" href="#propdef-mask-position" id="ref-for-propdef-mask-position⑨">mask-position</a> was described as list of items. Changed to have just one value.</p>
    <li data-md>
     <p>Change link to ED from <a href="https://drafts.fxtf.org/masking/">https://drafts.fxtf.org/masking/</a> to <a href="https://drafts.fxtf.org/css-masking-1/">https://drafts.fxtf.org/css-masking-1/</a></p>
   </ul>
   <p>The following significant changes were made since the <a href="https://www.w3.org/TR/2013/WD-css-masking-20130620/">20 June 2013 Working Draft</a>.</p>
   <ul>
    <li data-md>
     <p><a class="property" data-link-type="propdesc" href="#propdef-mask" id="ref-for-propdef-mask①③">mask</a> resets <span class="css">mask-box</span> properties.</p>
    <li data-md>
     <p>Initial values for <a class="property" data-link-type="propdesc" href="#propdef-mask-repeat" id="ref-for-propdef-mask-repeat⑥">mask-repeat</a>, <a class="property" data-link-type="propdesc" href="#propdef-mask-position" id="ref-for-propdef-mask-position①⓪">mask-position</a> and <a class="property" data-link-type="propdesc" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin①①">mask-origin</a> changed to <span class="css">no-repeat</span>, <span class="css">center</span> and <a class="css" data-link-type="maybe" href="#valdef-mask-origin-border-box" id="ref-for-valdef-mask-origin-border-box②">border-box</a>.</p>
    <li data-md>
     <p>Multiple layers of mask images were deferred to a future level of this specification.</p>
    <li data-md>
     <p>Added security model for pixel operations and fetching of masking and clipping resources.</p>
    <li data-md>
     <p>Deferred <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/fill-stroke-3/#valdef-svg-paint-child" id="ref-for-valdef-svg-paint-child">child</a> and select() function to next level.</p>
   </ul>
   <p>The following significant changes were made since the <a href="https://www.w3.org/TR/2012/WD-css-masking-20121115/">15 November 2012 Working Draft</a>.</p>
   <ul>
    <li data-md>
     <p>Better integration with terms and definitions of CSS Backgrounds and Borders module.</p>
    <li data-md>
     <p>Syntax changes on <a class="property" data-link-type="propdesc" href="#propdef-mask" id="ref-for-propdef-mask①④">mask</a> shorthand property to be conform with <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background" id="ref-for-propdef-background①">background</a> shorthand property.</p>
    <li data-md>
     <p>Define how the implementation can differ between an SVG resource (<a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask④⑤">mask</a>, <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath③③">clipPath</a>) and an image resource.</p>
    <li data-md>
     <p>Added <a class="property" data-link-type="propdesc" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode①④">mask-mode</a> property to alter between luminance and alpha mask on <a class="property" data-link-type="propdesc" href="#propdef-mask-image" id="ref-for-propdef-mask-image①⑧">mask-image</a>.</p>
    <li data-md>
     <p>Adapt IDL definition of SVGMaskElement and SVGClipPathElement to WebIDL.</p>
    <li data-md>
     <p>Further editorial changes.</p>
   </ul>
   <p>See detailed list of changes in the <a href="ChangeLog">ChangeLog</a>.</p>
   <h2 class="no-num heading settled" id="acknowledgments"><span class="content">Acknowledgments</span><a class="self-link" href="#acknowledgments"></a></h2>
   <p>Thanks to Elika J. Etemad, Cameron McCormack, Liam R. E. Quin, Björn Höhrmann, Alan Stearns, Jarek Foksa, David Baron, Boris Zbarsky, Markus Stange and Sara Soueidan for their careful reviews, comments, and corrections. Special thanks to CJ Gammon for graphical assets.</p>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
	document are to be interpreted as described in RFC 2119.
	However, for readability, these words do not appear in all uppercase
	letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
	if all of its statements that use syntax defined in this module are valid
	according to the generic CSS grammar and the individual grammars of each
	feature defined in this module. </p>
  <p>A renderer is conformant to this specification
	if, in addition to interpreting the style sheet as defined by the
	appropriate specifications, it supports all the features defined
	by this specification by parsing them correctly
	and rendering the document accordingly. However, the inability of a
	UA to correctly render a document due to limitations of the device
	does not make the UA non-conformant. (For example, a UA is not
	required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
	if it writes style sheets that are syntactically correct according to the
	generic CSS grammar and the individual grammars of each feature in
	this module, and meet all other conformance requirements of style sheets
	as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> selectively ignore
		unsupported property values and honor supported values in a single multi-value property declaration:
		if any value is considered invalid (as unsupported values must be),
		CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
		of any CR-level feature they can demonstrate
		to be correctly implemented according to spec,
		and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
		implementations, the CSS Working Group requests that non-experimental
		CSS renderers submit an implementation report (and, if necessary, the
		testcases used for that implementation report) to the W3C before
		releasing an unprefixed implementation of any CSS features. Testcases
		submitted to W3C are subject to review and correction by the CSS
		Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#valdef-mask-composite-add">add</a><span>, in §7.8</span>
   <li>
    alpha
    <ul>
     <li><a href="#valdef-mask-border-mode-alpha">value for mask-border-mode</a><span>, in §8.2</span>
     <li><a href="#valdef-mask-mode-alpha">value for mask-mode</a><span>, in §7.2</span>
     <li><a href="#valdef-mask-type-alpha">value for mask-type</a><span>, in §9.2</span>
    </ul>
   <li>
    border-box
    <ul>
     <li><a href="#valdef-mask-clip-border-box">value for mask-clip</a><span>, in §7.5</span>
     <li><a href="#valdef-mask-origin-border-box">value for mask-origin</a><span>, in §7.6</span>
    </ul>
   <li><a href="#typedef-clip-bottom">&lt;bottom></a><span>, in §Unnumbered section</span>
   <li><a href="#propdef-clip">clip</a><span>, in §Unnumbered section</span>
   <li><a href="#propdef-clip-path">clip-path</a><span>, in §5.1</span>
   <li><a href="#elementdef-clippath">clipPath</a><span>, in §6.1</span>
   <li>
    clipPathUnits
    <ul>
     <li><a href="#dom-svgclippathelement-clippathunits">attribute for SVGClipPathElement</a><span>, in §Unnumbered section</span>
     <li><a href="#element-attrdef-clippath-clippathunits">element-attr for clipPath</a><span>, in §6.1</span>
    </ul>
   <li><a href="#clipping-path">clipping path</a><span>, in §1.1</span>
   <li><a href="#clipping-region">clipping region</a><span>, in §5</span>
   <li><a href="#propdef-clip-rule">clip-rule</a><span>, in §6.2</span>
   <li><a href="#typedef-clip-source">&lt;clip-source></a><span>, in §5.1</span>
   <li><a href="#typedef-compositing-operator">&lt;compositing-operator></a><span>, in §7.8</span>
   <li>
    content-box
    <ul>
     <li><a href="#valdef-mask-clip-content-box">value for mask-clip</a><span>, in §7.5</span>
     <li><a href="#valdef-mask-origin-content-box">value for mask-origin</a><span>, in §7.6</span>
    </ul>
   <li><a href="#destination">destination</a><span>, in §7.8</span>
   <li><a href="#valdef-clip-rule-evenodd">evenodd</a><span>, in §6.2</span>
   <li><a href="#valdef-mask-composite-exclude">exclude</a><span>, in §7.8</span>
   <li><a href="#valdef-mask-border-slice-fill">fill</a><span>, in §8.3</span>
   <li>
    fill-box
    <ul>
     <li><a href="#valdef-clip-path-fill-box">value for clip-path</a><span>, in §5.1</span>
     <li><a href="#valdef-mask-clip-fill-box">value for mask-clip</a><span>, in §7.5</span>
     <li><a href="#valdef-mask-origin-fill-box">value for mask-origin</a><span>, in §7.6</span>
    </ul>
   <li><a href="#typedef-geometry-box">&lt;geometry-box></a><span>, in §5.1</span>
   <li>
    height
    <ul>
     <li><a href="#dom-svgmaskelement-height">attribute for SVGMaskElement</a><span>, in §Unnumbered section</span>
     <li><a href="#element-attrdef-mask-height">element-attr for mask</a><span>, in §9.1</span>
    </ul>
   <li><a href="#valdef-mask-composite-intersect">intersect</a><span>, in §7.8</span>
   <li><a href="#typedef-clip-left">&lt;left></a><span>, in §Unnumbered section</span>
   <li>
    luminance
    <ul>
     <li><a href="#valdef-mask-border-mode-luminance">value for mask-border-mode</a><span>, in §8.2</span>
     <li><a href="#valdef-mask-mode-luminance">value for mask-mode</a><span>, in §7.2</span>
     <li><a href="#valdef-mask-type-luminance">value for mask-type</a><span>, in §9.2</span>
    </ul>
   <li>
    mask
    <ul>
     <li><a href="#elementdef-mask">(element)</a><span>, in §9.1</span>
     <li><a href="#propdef-mask">(property)</a><span>, in §7.9</span>
    </ul>
   <li><a href="#propdef-mask-border">mask-border</a><span>, in §8.7</span>
   <li><a href="#mask-border-image">mask border image</a><span>, in §8.1</span>
   <li><a href="#mask-border-image-area">mask border image area</a><span>, in §8.4</span>
   <li><a href="#propdef-mask-border-mode">mask-border-mode</a><span>, in §8.2</span>
   <li><a href="#propdef-mask-border-outset">mask-border-outset</a><span>, in §8.5</span>
   <li><a href="#propdef-mask-border-repeat">mask-border-repeat</a><span>, in §8.6</span>
   <li><a href="#propdef-mask-border-slice">mask-border-slice</a><span>, in §8.3</span>
   <li><a href="#propdef-mask-border-source">mask-border-source</a><span>, in §8.1</span>
   <li><a href="#propdef-mask-border-width">mask-border-width</a><span>, in §8.4</span>
   <li><a href="#propdef-mask-clip">mask-clip</a><span>, in §7.5</span>
   <li><a href="#propdef-mask-composite">mask-composite</a><span>, in §7.8</span>
   <li>
    maskContentUnits
    <ul>
     <li><a href="#dom-svgmaskelement-maskcontentunits">attribute for SVGMaskElement</a><span>, in §Unnumbered section</span>
     <li><a href="#element-attrdef-mask-maskcontentunits">element-attr for mask</a><span>, in §9.1</span>
    </ul>
   <li><a href="#propdef-mask-image">mask-image</a><span>, in §7.1</span>
   <li><a href="#mask-image">mask image</a><span>, in §7.10.1</span>
   <li><a href="#typedef-masking-mode">&lt;masking-mode></a><span>, in §7.2</span>
   <li><a href="#typedef-mask-layer">&lt;mask-layer></a><span>, in §7.9</span>
   <li><a href="#mask-layer-image">mask layer image</a><span>, in §7.1</span>
   <li><a href="#propdef-mask-mode">mask-mode</a><span>, in §7.2</span>
   <li><a href="#propdef-mask-origin">mask-origin</a><span>, in §7.6</span>
   <li><a href="#mask-painting-area">mask painting area</a><span>, in §7.5</span>
   <li>
    mask-position
    <ul>
     <li><a href="#propdef-mask-position">(property)</a><span>, in §7.4</span>
     <li><a href="#mask-position">definition of</a><span>, in §4</span>
    </ul>
   <li><a href="#mask-positioning-area">mask positioning area</a><span>, in §7.6</span>
   <li><a href="#typedef-mask-reference">&lt;mask-reference></a><span>, in §7.1</span>
   <li><a href="#propdef-mask-repeat">mask-repeat</a><span>, in §7.3</span>
   <li>
    mask-size
    <ul>
     <li><a href="#propdef-mask-size">(property)</a><span>, in §7.7</span>
     <li><a href="#mask-size">definition of</a><span>, in §4</span>
    </ul>
   <li><a href="#typedef-mask-source">&lt;mask-source></a><span>, in §7.1</span>
   <li><a href="#propdef-mask-type">mask-type</a><span>, in §9.2</span>
   <li>
    maskUnits
    <ul>
     <li><a href="#dom-svgmaskelement-maskunits">attribute for SVGMaskElement</a><span>, in §Unnumbered section</span>
     <li><a href="#element-attrdef-mask-maskunits">element-attr for mask</a><span>, in §9.1</span>
    </ul>
   <li><a href="#valdef-mask-mode-match-source">match-source</a><span>, in §7.2</span>
   <li><a href="#valdef-mask-clip-no-clip">no-clip</a><span>, in §7.5</span>
   <li><a href="#valdef-clip-rule-nonzero">nonzero</a><span>, in §6.2</span>
   <li>
    objectBoundingBox
    <ul>
     <li><a href="#valdef-clippathunits-objectboundingbox">value for clipPathUnits</a><span>, in §6.1</span>
     <li><a href="#valdef-maskcontentunits-objectboundingbox">value for maskContentUnits</a><span>, in §9.1</span>
     <li><a href="#valdef-maskunits-objectboundingbox">value for maskUnits</a><span>, in §9.1</span>
    </ul>
   <li>
    padding-box
    <ul>
     <li><a href="#valdef-mask-clip-padding-box">value for mask-clip</a><span>, in §7.5</span>
     <li><a href="#valdef-mask-origin-padding-box">value for mask-origin</a><span>, in §7.6</span>
    </ul>
   <li><a href="#funcdef-clip-rect">rect()</a><span>, in §Unnumbered section</span>
   <li><a href="#typedef-clip-right">&lt;right></a><span>, in §Unnumbered section</span>
   <li><a href="#source">source</a><span>, in §7.8</span>
   <li><a href="#stroke-bounding-box">stroke bounding box</a><span>, in §Unnumbered section</span>
   <li>
    stroke-box
    <ul>
     <li><a href="#valdef-clip-path-stroke-box">value for clip-path</a><span>, in §5.1</span>
     <li><a href="#valdef-mask-clip-stroke-box">value for mask-clip</a><span>, in §7.5</span>
     <li><a href="#valdef-mask-origin-stroke-box">value for mask-origin</a><span>, in §7.6</span>
    </ul>
   <li><a href="#valdef-mask-composite-subtract">subtract</a><span>, in §7.8</span>
   <li><a href="#svgclippathelement">SVGClipPathElement</a><span>, in §Unnumbered section</span>
   <li><a href="#svgmaskelement">SVGMaskElement</a><span>, in §Unnumbered section</span>
   <li><a href="#typedef-clip-top">&lt;top></a><span>, in §Unnumbered section</span>
   <li><a href="#dom-svgclippathelement-transform">transform</a><span>, in §Unnumbered section</span>
   <li><a href="#valdef-mask-image-url">&lt;url></a><span>, in §7.1</span>
   <li>
    userSpaceOnUse
    <ul>
     <li><a href="#valdef-clippathunits-userspaceonuse">value for clipPathUnits</a><span>, in §6.1</span>
     <li><a href="#valdef-maskcontentunits-userspaceonuse">value for maskContentUnits</a><span>, in §9.1</span>
     <li><a href="#valdef-maskunits-userspaceonuse">value for maskUnits</a><span>, in §9.1</span>
    </ul>
   <li>
    view-box
    <ul>
     <li><a href="#valdef-clip-path-view-box">value for clip-path</a><span>, in §5.1</span>
     <li><a href="#valdef-mask-clip-view-box">value for mask-clip</a><span>, in §7.5</span>
     <li><a href="#valdef-mask-origin-view-box">value for mask-origin</a><span>, in §7.6</span>
    </ul>
   <li>
    width
    <ul>
     <li><a href="#dom-svgmaskelement-width">attribute for SVGMaskElement</a><span>, in §Unnumbered section</span>
     <li><a href="#element-attrdef-mask-width">element-attr for mask</a><span>, in §9.1</span>
    </ul>
   <li>
    x
    <ul>
     <li><a href="#dom-svgmaskelement-x">attribute for SVGMaskElement</a><span>, in §Unnumbered section</span>
     <li><a href="#element-attrdef-mask-x">element-attr for mask</a><span>, in §9.1</span>
    </ul>
   <li>
    y
    <ul>
     <li><a href="#dom-svgmaskelement-y">attribute for SVGMaskElement</a><span>, in §Unnumbered section</span>
     <li><a href="#element-attrdef-mask-y">element-attr for mask</a><span>, in §9.1</span>
    </ul>
  </ul>
  <aside class="dfn-panel" data-for="term-for-propdef-box-decoration-break">
   <a href="https://drafts.csswg.org/css-break-4/#propdef-box-decoration-break">https://drafts.csswg.org/css-break-4/#propdef-box-decoration-break</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-box-decoration-break">7.6. Positioning Area: the mask-origin property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-used-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#used-value">https://drafts.csswg.org/css-cascade-4/#used-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-used-value">5.1. Clipping Shape: the clip-path property</a> <a href="#ref-for-used-value①">(2)</a>
    <li><a href="#ref-for-used-value②">7.5. Masking Area: the mask-clip property</a> <a href="#ref-for-used-value③">(2)</a>
    <li><a href="#ref-for-used-value④">7.9. Mask Shorthand: the mask property</a>
    <li><a href="#ref-for-used-value⑤">Appendix A: The deprecated clip property</a>
    <li><a href="#ref-for-used-value⑥">Appendix B: Compute stroke bounding box</a>
    <li><a href="#ref-for-used-value⑦">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-color">
   <a href="https://drafts.csswg.org/css-color-4/#propdef-color">https://drafts.csswg.org/css-color-4/#propdef-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-color">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-color①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-opacity">
   <a href="https://drafts.csswg.org/css-color-4/#propdef-opacity">https://drafts.csswg.org/css-color-4/#propdef-opacity</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-opacity">5.1. Clipping Shape: the clip-path property</a>
    <li><a href="#ref-for-propdef-opacity①">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-opacity②">7.1. Mask Image Source: the mask-image property</a>
    <li><a href="#ref-for-propdef-opacity③">7.10. The Mask Image Rendering Model</a>
    <li><a href="#ref-for-propdef-opacity④">8.1. Mask Border Image Source: the mask-border-source property</a>
    <li><a href="#ref-for-propdef-opacity⑤">8.8. Masking with the mask border image</a>
    <li><a href="#ref-for-propdef-opacity⑥">9.1. The mask element</a> <a href="#ref-for-propdef-opacity⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-display">
   <a href="https://drafts.csswg.org/css-display-3/#propdef-display">https://drafts.csswg.org/css-display-3/#propdef-display</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-display">6.1. The clipPath element</a> <a href="#ref-for-propdef-display①">(2)</a> <a href="#ref-for-propdef-display②">(3)</a> <a href="#ref-for-propdef-display③">(4)</a> <a href="#ref-for-propdef-display④">(5)</a>
    <li><a href="#ref-for-propdef-display⑤">9.1. The mask element</a> <a href="#ref-for-propdef-display⑥">(2)</a> <a href="#ref-for-propdef-display⑦">(3)</a> <a href="#ref-for-propdef-display⑧">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-display-none">
   <a href="https://drafts.csswg.org/css-display-3/#valdef-display-none">https://drafts.csswg.org/css-display-3/#valdef-display-none</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-none">6.1. The clipPath element</a> <a href="#ref-for-valdef-display-none①">(2)</a>
    <li><a href="#ref-for-valdef-display-none②">9.1. The mask element</a> <a href="#ref-for-valdef-display-none③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-font">
   <a href="https://drafts.csswg.org/css-fonts-3/#propdef-font">https://drafts.csswg.org/css-fonts-3/#propdef-font</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-font">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-font①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-font-family">
   <a href="https://drafts.csswg.org/css-fonts-3/#propdef-font-family">https://drafts.csswg.org/css-fonts-3/#propdef-font-family</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-font-family">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-font-family①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-font-size">
   <a href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size">https://drafts.csswg.org/css-fonts-3/#propdef-font-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-font-size">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-font-size①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-font-style">
   <a href="https://drafts.csswg.org/css-fonts-3/#propdef-font-style">https://drafts.csswg.org/css-fonts-3/#propdef-font-style</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-font-style">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-font-style①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-font-variant">
   <a href="https://drafts.csswg.org/css-fonts-3/#propdef-font-variant">https://drafts.csswg.org/css-fonts-3/#propdef-font-variant</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-font-variant">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-font-variant①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-font-weight">
   <a href="https://drafts.csswg.org/css-fonts-3/#propdef-font-weight">https://drafts.csswg.org/css-fonts-3/#propdef-font-weight</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-font-weight">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-font-weight①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-font-size-adjust">
   <a href="https://drafts.csswg.org/css-fonts-4/#propdef-font-size-adjust">https://drafts.csswg.org/css-fonts-4/#propdef-font-size-adjust</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-font-size-adjust">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-font-size-adjust①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-font-stretch">
   <a href="https://drafts.csswg.org/css-fonts-4/#propdef-font-stretch">https://drafts.csswg.org/css-fonts-4/#propdef-font-stretch</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-font-stretch">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-font-stretch①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-alignment-baseline">
   <a href="https://drafts.csswg.org/css-inline-3/#propdef-alignment-baseline">https://drafts.csswg.org/css-inline-3/#propdef-alignment-baseline</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-alignment-baseline">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-alignment-baseline①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-baseline-shift">
   <a href="https://drafts.csswg.org/css-inline-3/#propdef-baseline-shift">https://drafts.csswg.org/css-inline-3/#propdef-baseline-shift</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-baseline-shift">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-baseline-shift①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-dominant-baseline">
   <a href="https://drafts.csswg.org/css-inline-3/#propdef-dominant-baseline">https://drafts.csswg.org/css-inline-3/#propdef-dominant-baseline</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-dominant-baseline">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-dominant-baseline①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-overflow">
   <a href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">https://drafts.csswg.org/css-overflow-3/#propdef-overflow</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-overflow">5. Clipping Paths</a>
    <li><a href="#ref-for-propdef-overflow①">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-overflow②">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-overflow-visible">
   <a href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible">https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-overflow-visible">5. Clipping Paths</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-stacking-context">
   <a href="https://drafts.csswg.org/css-position-3/#stacking-context">https://drafts.csswg.org/css-position-3/#stacking-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-stacking-context">2. Module interactions</a>
    <li><a href="#ref-for-stacking-context①">5.1. Clipping Shape: the clip-path property</a>
    <li><a href="#ref-for-stacking-context②">7.1. Mask Image Source: the mask-image property</a>
    <li><a href="#ref-for-stacking-context③">7.10. The Mask Image Rendering Model</a>
    <li><a href="#ref-for-stacking-context④">8.1. Mask Border Image Source: the mask-border-source property</a>
    <li><a href="#ref-for-stacking-context⑤">8.8. Masking with the mask border image</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-shape-box">
   <a href="https://drafts.csswg.org/css-shapes-1/#typedef-shape-box">https://drafts.csswg.org/css-shapes-1/#typedef-shape-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-shape-box">5.1. Clipping Shape: the clip-path property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-funcdef-polygon">
   <a href="https://drafts.csswg.org/css-shapes-1/#funcdef-polygon">https://drafts.csswg.org/css-shapes-1/#funcdef-polygon</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-polygon">5.1. Clipping Shape: the clip-path property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-basic-shape">
   <a href="https://drafts.csswg.org/css-shapes-2/#typedef-basic-shape">https://drafts.csswg.org/css-shapes-2/#typedef-basic-shape</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-basic-shape">5.1. Clipping Shape: the clip-path property</a> <a href="#ref-for-typedef-basic-shape①">(2)</a> <a href="#ref-for-typedef-basic-shape②">(3)</a> <a href="#ref-for-typedef-basic-shape③">(4)</a>
    <li><a href="#ref-for-typedef-basic-shape④">6.2. Winding Rules: the clip-rule property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-letter-spacing">
   <a href="https://drafts.csswg.org/css-text-3/#propdef-letter-spacing">https://drafts.csswg.org/css-text-3/#propdef-letter-spacing</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-letter-spacing">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-letter-spacing①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-word-spacing">
   <a href="https://drafts.csswg.org/css-text-3/#propdef-word-spacing">https://drafts.csswg.org/css-text-3/#propdef-word-spacing</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-word-spacing">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-word-spacing①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-text-decoration">
   <a href="https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration">https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-decoration">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-text-decoration①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-cursor">
   <a href="https://drafts.csswg.org/css-ui-4/#propdef-cursor">https://drafts.csswg.org/css-ui-4/#propdef-cursor</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-cursor">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-cursor①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-comma">
   <a href="https://drafts.csswg.org/css-values-4/#mult-comma">https://drafts.csswg.org/css-values-4/#mult-comma</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-comma">7.1. Mask Image Source: the mask-image property</a>
    <li><a href="#ref-for-mult-comma①">7.2. Mask Image Interpretation: the mask-mode property</a>
    <li><a href="#ref-for-mult-comma②">7.3. Tiling Mask Images: the mask-repeat property</a>
    <li><a href="#ref-for-mult-comma③">7.4. Positioning Mask Images: the mask-position property</a>
    <li><a href="#ref-for-mult-comma④">7.5. Masking Area: the mask-clip property</a>
    <li><a href="#ref-for-mult-comma⑤">7.6. Positioning Area: the mask-origin property</a>
    <li><a href="#ref-for-mult-comma⑥">7.7. Sizing Mask Images: the mask-size property</a>
    <li><a href="#ref-for-mult-comma⑦">7.8. Compositing mask layers: the mask-composite property</a>
    <li><a href="#ref-for-mult-comma⑧">7.9. Mask Shorthand: the mask property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-length-percentage">
   <a href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage">https://drafts.csswg.org/css-values-4/#typedef-length-percentage</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-length-percentage">8.4. Masking Areas: the mask-border-width property</a>
    <li><a href="#ref-for-typedef-length-percentage①">9.1. The mask element</a> <a href="#ref-for-typedef-length-percentage②">(2)</a> <a href="#ref-for-typedef-length-percentage③">(3)</a> <a href="#ref-for-typedef-length-percentage④">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-position">
   <a href="https://drafts.csswg.org/css-values-4/#typedef-position">https://drafts.csswg.org/css-values-4/#typedef-position</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-position">7.4. Positioning Mask Images: the mask-position property</a>
    <li><a href="#ref-for-typedef-position①">7.9. Mask Shorthand: the mask property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-opt">
   <a href="https://drafts.csswg.org/css-values-4/#mult-opt">https://drafts.csswg.org/css-values-4/#mult-opt</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-opt">7.9. Mask Shorthand: the mask property</a>
    <li><a href="#ref-for-mult-opt①">8.3. Mask Border Image Slicing: the mask-border-slice property</a>
    <li><a href="#ref-for-mult-opt②">8.7. Mask Border Image Shorthand: the mask-border property</a> <a href="#ref-for-mult-opt③">(2)</a> <a href="#ref-for-mult-opt④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-px">
   <a href="https://drafts.csswg.org/css-values-4/#px">https://drafts.csswg.org/css-values-4/#px</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-px">6.1. The clipPath element</a>
    <li><a href="#ref-for-px①">9.1. The mask element</a> <a href="#ref-for-px②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-num-range">
   <a href="https://drafts.csswg.org/css-values-4/#mult-num-range">https://drafts.csswg.org/css-values-4/#mult-num-range</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-num-range">8.3. Mask Border Image Slicing: the mask-border-slice property</a>
    <li><a href="#ref-for-mult-num-range①">8.4. Masking Areas: the mask-border-width property</a>
    <li><a href="#ref-for-mult-num-range②">8.5. Edge Overhang: the mask-border-outset property</a>
    <li><a href="#ref-for-mult-num-range③">8.6. Mask Border Image Tiling: the mask-border-repeat property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-one">
   <a href="https://drafts.csswg.org/css-values-4/#comb-one">https://drafts.csswg.org/css-values-4/#comb-one</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-one">5.1. Clipping Shape: the clip-path property</a> <a href="#ref-for-comb-one①">(2)</a> <a href="#ref-for-comb-one②">(3)</a> <a href="#ref-for-comb-one③">(4)</a> <a href="#ref-for-comb-one④">(5)</a>
    <li><a href="#ref-for-comb-one⑤">6.2. Winding Rules: the clip-rule property</a>
    <li><a href="#ref-for-comb-one⑥">7.1. Mask Image Source: the mask-image property</a> <a href="#ref-for-comb-one⑦">(2)</a>
    <li><a href="#ref-for-comb-one⑧">7.2. Mask Image Interpretation: the mask-mode property</a> <a href="#ref-for-comb-one⑨">(2)</a>
    <li><a href="#ref-for-comb-one①⓪">7.5. Masking Area: the mask-clip property</a>
    <li><a href="#ref-for-comb-one①①">7.8. Compositing mask layers: the mask-composite property</a> <a href="#ref-for-comb-one①②">(2)</a> <a href="#ref-for-comb-one①③">(3)</a>
    <li><a href="#ref-for-comb-one①④">7.9. Mask Shorthand: the mask property</a>
    <li><a href="#ref-for-comb-one①⑤">8.1. Mask Border Image Source: the mask-border-source property</a>
    <li><a href="#ref-for-comb-one①⑥">8.2. Mask Border Image Interpretation: the mask-border-mode property</a>
    <li><a href="#ref-for-comb-one①⑦">8.4. Masking Areas: the mask-border-width property</a> <a href="#ref-for-comb-one①⑧">(2)</a>
    <li><a href="#ref-for-comb-one①⑨">8.5. Edge Overhang: the mask-border-outset property</a>
    <li><a href="#ref-for-comb-one②⓪">8.6. Mask Border Image Tiling: the mask-border-repeat property</a> <a href="#ref-for-comb-one②①">(2)</a> <a href="#ref-for-comb-one②②">(3)</a>
    <li><a href="#ref-for-comb-one②③">9.2. Mask Source Interpretation: the mask-type property</a>
    <li><a href="#ref-for-comb-one②④">Appendix A: The deprecated clip property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-any">
   <a href="https://drafts.csswg.org/css-values-4/#comb-any">https://drafts.csswg.org/css-values-4/#comb-any</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-any">5.1. Clipping Shape: the clip-path property</a>
    <li><a href="#ref-for-comb-any①">7.9. Mask Shorthand: the mask property</a> <a href="#ref-for-comb-any②">(2)</a> <a href="#ref-for-comb-any③">(3)</a> <a href="#ref-for-comb-any④">(4)</a> <a href="#ref-for-comb-any⑤">(5)</a> <a href="#ref-for-comb-any⑥">(6)</a>
    <li><a href="#ref-for-comb-any⑦">8.7. Mask Border Image Shorthand: the mask-border property</a> <a href="#ref-for-comb-any⑧">(2)</a> <a href="#ref-for-comb-any⑨">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-direction">
   <a href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">https://drafts.csswg.org/css-writing-modes-3/#propdef-direction</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-direction">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-direction①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-unicode-bidi">
   <a href="https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi">https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-unicode-bidi">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-unicode-bidi①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-glyph-orientation-vertical">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#propdef-glyph-orientation-vertical">https://drafts.csswg.org/css-writing-modes-4/#propdef-glyph-orientation-vertical</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-glyph-orientation-vertical">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-glyph-orientation-vertical①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-writing-mode">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode">https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-writing-mode">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-writing-mode①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-visibility">
   <a href="https://drafts.csswg.org/css2/visufx.html#propdef-visibility">https://drafts.csswg.org/css2/visufx.html#propdef-visibility</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-visibility">6.1. The clipPath element</a> <a href="#ref-for-propdef-visibility①">(2)</a>
    <li><a href="#ref-for-propdef-visibility②">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-image">
   <a href="https://drafts.csswg.org/css-images-3/#typedef-image">https://drafts.csswg.org/css-images-3/#typedef-image</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-image">7.1. Mask Image Source: the mask-image property</a> <a href="#ref-for-typedef-image①">(2)</a> <a href="#ref-for-typedef-image②">(3)</a>
    <li><a href="#ref-for-typedef-image③">7.2. Mask Image Interpretation: the mask-mode property</a>
    <li><a href="#ref-for-typedef-image④">8.1. Mask Border Image Source: the mask-border-source property</a> <a href="#ref-for-typedef-image⑤">(2)</a>
    <li><a href="#ref-for-typedef-image⑥">8.2. Mask Border Image Interpretation: the mask-border-mode property</a>
    <li><a href="#ref-for-typedef-image⑦">10. Privacy and Security Considerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-image-rendering">
   <a href="https://drafts.csswg.org/css-images-3/#propdef-image-rendering">https://drafts.csswg.org/css-images-3/#propdef-image-rendering</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-image-rendering">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-image-rendering①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-transform">
   <a href="https://drafts.csswg.org/css-transforms-1/#propdef-transform">https://drafts.csswg.org/css-transforms-1/#propdef-transform</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-transform">Interface SVGClipPathElement</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-user-coordinate-system">
   <a href="https://drafts.csswg.org/css-transforms-1/#user-coordinate-system">https://drafts.csswg.org/css-transforms-1/#user-coordinate-system</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-user-coordinate-system">6.1. The clipPath element</a> <a href="#ref-for-user-coordinate-system①">(2)</a>
    <li><a href="#ref-for-user-coordinate-system②">9.1. The mask element</a> <a href="#ref-for-user-coordinate-system③">(2)</a> <a href="#ref-for-user-coordinate-system④">(3)</a> <a href="#ref-for-user-coordinate-system⑤">(4)</a> <a href="#ref-for-user-coordinate-system⑥">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-bg-size">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#typedef-bg-size">https://drafts.csswg.org/css-backgrounds-3/#typedef-bg-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-bg-size">7.7. Sizing Mask Images: the mask-size property</a>
    <li><a href="#ref-for-typedef-bg-size①">7.9. Mask Shorthand: the mask property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-repeat-style">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#typedef-repeat-style">https://drafts.csswg.org/css-backgrounds-3/#typedef-repeat-style</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-repeat-style">7.3. Tiling Mask Images: the mask-repeat property</a>
    <li><a href="#ref-for-typedef-repeat-style①">7.9. Mask Shorthand: the mask property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background">https://drafts.csswg.org/css-backgrounds-3/#propdef-background</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background">Changes since last publication</a> <a href="#ref-for-propdef-background①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-background-painting-area">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#background-painting-area">https://drafts.csswg.org/css-backgrounds-3/#background-painting-area</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-background-painting-area">4. Terminology</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-background-positioning-area">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#background-positioning-area">https://drafts.csswg.org/css-backgrounds-3/#background-positioning-area</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-background-positioning-area">4. Terminology</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background-origin">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-origin">https://drafts.csswg.org/css-backgrounds-3/#propdef-background-origin</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-origin">7.6. Positioning Area: the mask-origin property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background-position">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position">https://drafts.csswg.org/css-backgrounds-3/#propdef-background-position</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-position">7.4. Positioning Mask Images: the mask-position property</a> <a href="#ref-for-propdef-background-position①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background-repeat">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-repeat">https://drafts.csswg.org/css-backgrounds-3/#propdef-background-repeat</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-repeat">7.3. Tiling Mask Images: the mask-repeat property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background-size">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-size">https://drafts.csswg.org/css-backgrounds-3/#propdef-background-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-size">7.7. Sizing Mask Images: the mask-size property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-border-image-area">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#border-image-area">https://drafts.csswg.org/css-backgrounds-3/#border-image-area</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-border-image-area">4. Terminology</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-image">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-image">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-image</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-image">8. Border-Box Mask</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-image-repeat">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-image-repeat">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-image-repeat</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-image-repeat">8.6. Mask Border Image Tiling: the mask-border-repeat property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-image-slice">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-image-slice">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-image-slice</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-image-slice">8.3. Mask Border Image Slicing: the mask-border-slice property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-image-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-image-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-image-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-image-width">8.4. Masking Areas: the mask-border-width property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-radius">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-radius">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-radius</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-radius">5.1. Clipping Shape: the clip-path property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-width">8.4. Masking Areas: the mask-border-width property</a>
    <li><a href="#ref-for-propdef-border-width①">8.5. Edge Overhang: the mask-border-outset property</a> <a href="#ref-for-propdef-border-width②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-length-value">
   <a href="https://drafts.csswg.org/css-values-3/#length-value">https://drafts.csswg.org/css-values-3/#length-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-length-value">7.4. Positioning Mask Images: the mask-position property</a>
    <li><a href="#ref-for-length-value①">8.4. Masking Areas: the mask-border-width property</a>
    <li><a href="#ref-for-length-value②">8.5. Edge Overhang: the mask-border-outset property</a> <a href="#ref-for-length-value③">(2)</a>
    <li><a href="#ref-for-length-value④">Appendix A: The deprecated clip property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-number-percentage">
   <a href="https://drafts.csswg.org/css-values-3/#typedef-number-percentage">https://drafts.csswg.org/css-values-3/#typedef-number-percentage</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-number-percentage">8.3. Mask Border Image Slicing: the mask-border-slice property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-number-value">
   <a href="https://drafts.csswg.org/css-values-3/#number-value">https://drafts.csswg.org/css-values-3/#number-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-number-value">8.4. Masking Areas: the mask-border-width property</a>
    <li><a href="#ref-for-number-value①">8.5. Edge Overhang: the mask-border-outset property</a> <a href="#ref-for-number-value②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-url-value">
   <a href="https://drafts.csswg.org/css-values-3/#url-value">https://drafts.csswg.org/css-values-3/#url-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-url-value">5.1. Clipping Shape: the clip-path property</a> <a href="#ref-for-url-value①">(2)</a>
    <li><a href="#ref-for-url-value②">7.1. Mask Image Source: the mask-image property</a> <a href="#ref-for-url-value③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-svg-paint-child">
   <a href="https://drafts.fxtf.org/fill-stroke-3/#valdef-svg-paint-child">https://drafts.fxtf.org/fill-stroke-3/#valdef-svg-paint-child</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-svg-paint-child">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-stroke-linejoin-miter">
   <a href="https://drafts.fxtf.org/fill-stroke-3/#valdef-stroke-linejoin-miter">https://drafts.fxtf.org/fill-stroke-3/#valdef-stroke-linejoin-miter</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-linejoin-miter">Appendix B: Compute stroke bounding box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-stroke-linecap-square">
   <a href="https://drafts.fxtf.org/fill-stroke-3/#valdef-stroke-linecap-square">https://drafts.fxtf.org/fill-stroke-3/#valdef-stroke-linecap-square</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-stroke-linecap-square">Appendix B: Compute stroke bounding box</a> <a href="#ref-for-valdef-stroke-linecap-square①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-color-interpolation-filters">
   <a href="https://drafts.fxtf.org/filter-effects-1/#propdef-color-interpolation-filters">https://drafts.fxtf.org/filter-effects-1/#propdef-color-interpolation-filters</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-color-interpolation-filters">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-color-interpolation-filters①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-fecolormatrix">
   <a href="https://drafts.fxtf.org/filter-effects-1/#elementdef-fecolormatrix">https://drafts.fxtf.org/filter-effects-1/#elementdef-fecolormatrix</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-fecolormatrix">7.10.1. Mask processing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-filter">
   <a href="https://drafts.fxtf.org/filter-effects-1/#propdef-filter">https://drafts.fxtf.org/filter-effects-1/#propdef-filter</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-filter">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-filter①">9.1. The mask element</a> <a href="#ref-for-propdef-filter②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-flood-color">
   <a href="https://drafts.fxtf.org/filter-effects-1/#propdef-flood-color">https://drafts.fxtf.org/filter-effects-1/#propdef-flood-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-flood-color">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-flood-color①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-flood-opacity">
   <a href="https://drafts.fxtf.org/filter-effects-1/#propdef-flood-opacity">https://drafts.fxtf.org/filter-effects-1/#propdef-flood-opacity</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-flood-opacity">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-flood-opacity①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-lighting-color">
   <a href="https://drafts.fxtf.org/filter-effects-1/#propdef-lighting-color">https://drafts.fxtf.org/filter-effects-1/#propdef-lighting-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-lighting-color">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-lighting-color①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-color-interpolation-filters-linearrgb">
   <a href="https://drafts.fxtf.org/filter-effects-1/#valdef-color-interpolation-filters-linearrgb">https://drafts.fxtf.org/filter-effects-1/#valdef-color-interpolation-filters-linearrgb</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-color-interpolation-filters-linearrgb">7.10.1. Mask processing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-AlternateGlyphDefinitions">
   <a href="https://www.w3.org/TR/SVG11/text.html#AlternateGlyphDefinitions">https://www.w3.org/TR/SVG11/text.html#AlternateGlyphDefinitions</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-AlternateGlyphDefinitions">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-AnimateElement">
   <a href="https://www.w3.org/TR/SVG11/animate.html#AnimateElement">https://www.w3.org/TR/SVG11/animate.html#AnimateElement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-AnimateElement">6.1. The clipPath element</a>
    <li><a href="#ref-for-AnimateElement①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-AnimateColorElement">
   <a href="https://www.w3.org/TR/SVG11/animate.html#AnimateColorElement">https://www.w3.org/TR/SVG11/animate.html#AnimateColorElement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-AnimateColorElement">6.1. The clipPath element</a>
    <li><a href="#ref-for-AnimateColorElement①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-AnimateMotionElement">
   <a href="https://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement">https://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-AnimateMotionElement">6.1. The clipPath element</a>
    <li><a href="#ref-for-AnimateMotionElement①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-AnimateTransformElement">
   <a href="https://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement">https://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-AnimateTransformElement">6.1. The clipPath element</a>
    <li><a href="#ref-for-AnimateTransformElement①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ColorProfileProperty">
   <a href="https://www.w3.org/TR/SVG11/color.html#ColorProfileProperty">https://www.w3.org/TR/SVG11/color.html#ColorProfileProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ColorProfileProperty">6.1. The clipPath element</a>
    <li><a href="#ref-for-ColorProfileProperty①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ColorRenderingProperty">
   <a href="https://www.w3.org/TR/SVG11/painting.html#ColorRenderingProperty">https://www.w3.org/TR/SVG11/painting.html#ColorRenderingProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ColorRenderingProperty">6.1. The clipPath element</a>
    <li><a href="#ref-for-ColorRenderingProperty①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-CursorElement">
   <a href="https://www.w3.org/TR/SVG11/interact.html#CursorElement">https://www.w3.org/TR/SVG11/interact.html#CursorElement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-CursorElement">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-EnableBackgroundProperty">
   <a href="https://www.w3.org/TR/SVG11/filters.html#EnableBackgroundProperty">https://www.w3.org/TR/SVG11/filters.html#EnableBackgroundProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-EnableBackgroundProperty">6.1. The clipPath element</a>
    <li><a href="#ref-for-EnableBackgroundProperty①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-FontElement">
   <a href="https://www.w3.org/TR/SVG11/fonts.html#FontElement">https://www.w3.org/TR/SVG11/fonts.html#FontElement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-FontElement">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-FontFaceElement">
   <a href="https://www.w3.org/TR/SVG11/fonts.html#FontFaceElement">https://www.w3.org/TR/SVG11/fonts.html#FontFaceElement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-FontFaceElement">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-GlyphOrientationHorizontalProperty">
   <a href="https://www.w3.org/TR/SVG11/text.html#GlyphOrientationHorizontalProperty">https://www.w3.org/TR/SVG11/text.html#GlyphOrientationHorizontalProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-GlyphOrientationHorizontalProperty">6.1. The clipPath element</a>
    <li><a href="#ref-for-GlyphOrientationHorizontalProperty①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-KerningProperty">
   <a href="https://www.w3.org/TR/SVG11/text.html#KerningProperty">https://www.w3.org/TR/SVG11/text.html#KerningProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-KerningProperty">6.1. The clipPath element</a>
    <li><a href="#ref-for-KerningProperty①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-SetElement">
   <a href="https://www.w3.org/TR/SVG11/animate.html#SetElement">https://www.w3.org/TR/SVG11/animate.html#SetElement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-SetElement">6.1. The clipPath element</a>
    <li><a href="#ref-for-SetElement①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-InterfaceSVGAnimatedEnumeration">
   <a href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedEnumeration">https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedEnumeration</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-InterfaceSVGAnimatedEnumeration">Interface SVGClipPathElement</a> <a href="#ref-for-InterfaceSVGAnimatedEnumeration①">(2)</a>
    <li><a href="#ref-for-InterfaceSVGAnimatedEnumeration②">Interface SVGMaskElement</a> <a href="#ref-for-InterfaceSVGAnimatedEnumeration③">(2)</a> <a href="#ref-for-InterfaceSVGAnimatedEnumeration④">(3)</a> <a href="#ref-for-InterfaceSVGAnimatedEnumeration⑤">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-InterfaceSVGAnimatedLength">
   <a href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedLength">https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedLength</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-InterfaceSVGAnimatedLength">Interface SVGMaskElement</a> <a href="#ref-for-InterfaceSVGAnimatedLength①">(2)</a> <a href="#ref-for-InterfaceSVGAnimatedLength②">(3)</a> <a href="#ref-for-InterfaceSVGAnimatedLength③">(4)</a> <a href="#ref-for-InterfaceSVGAnimatedLength④">(5)</a> <a href="#ref-for-InterfaceSVGAnimatedLength⑤">(6)</a> <a href="#ref-for-InterfaceSVGAnimatedLength⑥">(7)</a> <a href="#ref-for-InterfaceSVGAnimatedLength⑦">(8)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-InterfaceSVGAnimatedTransformList">
   <a href="https://svgwg.org/svg2-draft/coords.html#InterfaceSVGAnimatedTransformList">https://svgwg.org/svg2-draft/coords.html#InterfaceSVGAnimatedTransformList</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-InterfaceSVGAnimatedTransformList">Interface SVGClipPathElement</a> <a href="#ref-for-InterfaceSVGAnimatedTransformList①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-InterfaceSVGElement">
   <a href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGElement">https://svgwg.org/svg2-draft/types.html#InterfaceSVGElement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-InterfaceSVGElement">Interface SVGClipPathElement</a>
    <li><a href="#ref-for-InterfaceSVGElement①">Interface SVGMaskElement</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-InterfaceSVGUnitTypes">
   <a href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGUnitTypes">https://svgwg.org/svg2-draft/types.html#InterfaceSVGUnitTypes</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-InterfaceSVGUnitTypes">Interface SVGClipPathElement</a>
    <li><a href="#ref-for-InterfaceSVGUnitTypes①">Interface SVGMaskElement</a> <a href="#ref-for-InterfaceSVGUnitTypes②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-a">
   <a href="https://svgwg.org/svg2-draft/linking.html#elementdef-a">https://svgwg.org/svg2-draft/linking.html#elementdef-a</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-a">9.1. The mask element</a>
    <li><a href="#ref-for-elementdef-a①">Appendix B: Compute stroke bounding box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-basic-shape">
   <a href="https://svgwg.org/svg2-draft/shapes.html#basic-shape">https://svgwg.org/svg2-draft/shapes.html#basic-shape</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-basic-shape">6.1. The clipPath element</a> <a href="#ref-for-basic-shape①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-bounding-box">
   <a href="https://svgwg.org/svg2-draft/coords.html#bounding-box">https://svgwg.org/svg2-draft/coords.html#bounding-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-bounding-box">6.1. The clipPath element</a> <a href="#ref-for-bounding-box①">(2)</a>
    <li><a href="#ref-for-bounding-box②">9.1. The mask element</a> <a href="#ref-for-bounding-box③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-circle">
   <a href="https://svgwg.org/svg2-draft/shapes.html#elementdef-circle">https://svgwg.org/svg2-draft/shapes.html#elementdef-circle</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-circle">6.1. The clipPath element</a> <a href="#ref-for-elementdef-circle①">(2)</a>
    <li><a href="#ref-for-elementdef-circle②">7.10.1. Mask processing</a>
    <li><a href="#ref-for-elementdef-circle③">9.1. The mask element</a>
    <li><a href="#ref-for-elementdef-circle④">Appendix B: Compute stroke bounding box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ColorInterpolationProperty">
   <a href="https://svgwg.org/svg2-draft/painting.html#ColorInterpolationProperty">https://svgwg.org/svg2-draft/painting.html#ColorInterpolationProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ColorInterpolationProperty">6.1. The clipPath element</a>
    <li><a href="#ref-for-ColorInterpolationProperty①">7.10.1. Mask processing</a>
    <li><a href="#ref-for-ColorInterpolationProperty②">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-container-element">
   <a href="https://svgwg.org/svg2-draft/struct.html#container-element">https://svgwg.org/svg2-draft/struct.html#container-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-container-element">5.1. Clipping Shape: the clip-path property</a>
    <li><a href="#ref-for-container-element①">6.1. The clipPath element</a>
    <li><a href="#ref-for-container-element②">7.1. Mask Image Source: the mask-image property</a>
    <li><a href="#ref-for-container-element③">7.2. Mask Image Interpretation: the mask-mode property</a>
    <li><a href="#ref-for-container-element④">7.3. Tiling Mask Images: the mask-repeat property</a>
    <li><a href="#ref-for-container-element⑤">7.4. Positioning Mask Images: the mask-position property</a>
    <li><a href="#ref-for-container-element⑥">7.5. Masking Area: the mask-clip property</a>
    <li><a href="#ref-for-container-element⑦">7.6. Positioning Area: the mask-origin property</a>
    <li><a href="#ref-for-container-element⑧">7.7. Sizing Mask Images: the mask-size property</a>
    <li><a href="#ref-for-container-element⑨">7.8. Compositing mask layers: the mask-composite property</a>
    <li><a href="#ref-for-container-element①⓪">7.9. Mask Shorthand: the mask property</a>
    <li><a href="#ref-for-container-element①①">8.1. Mask Border Image Source: the mask-border-source property</a>
    <li><a href="#ref-for-container-element①②">8.2. Mask Border Image Interpretation: the mask-border-mode property</a>
    <li><a href="#ref-for-container-element①③">8.3. Mask Border Image Slicing: the mask-border-slice property</a>
    <li><a href="#ref-for-container-element①④">8.4. Masking Areas: the mask-border-width property</a>
    <li><a href="#ref-for-container-element①⑤">8.5. Edge Overhang: the mask-border-outset property</a>
    <li><a href="#ref-for-container-element①⑥">8.6. Mask Border Image Tiling: the mask-border-repeat property</a>
    <li><a href="#ref-for-container-element①⑦">9.1. The mask element</a>
    <li><a href="#ref-for-container-element①⑧">Appendix B: Compute stroke bounding box</a> <a href="#ref-for-container-element①⑨">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-defs">
   <a href="https://svgwg.org/svg2-draft/struct.html#elementdef-defs">https://svgwg.org/svg2-draft/struct.html#elementdef-defs</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-defs">5.1. Clipping Shape: the clip-path property</a>
    <li><a href="#ref-for-elementdef-defs①">7.1. Mask Image Source: the mask-image property</a>
    <li><a href="#ref-for-elementdef-defs②">7.2. Mask Image Interpretation: the mask-mode property</a>
    <li><a href="#ref-for-elementdef-defs③">7.3. Tiling Mask Images: the mask-repeat property</a>
    <li><a href="#ref-for-elementdef-defs④">7.4. Positioning Mask Images: the mask-position property</a>
    <li><a href="#ref-for-elementdef-defs⑤">7.5. Masking Area: the mask-clip property</a>
    <li><a href="#ref-for-elementdef-defs⑥">7.6. Positioning Area: the mask-origin property</a>
    <li><a href="#ref-for-elementdef-defs⑦">7.7. Sizing Mask Images: the mask-size property</a>
    <li><a href="#ref-for-elementdef-defs⑧">7.8. Compositing mask layers: the mask-composite property</a>
    <li><a href="#ref-for-elementdef-defs⑨">7.9. Mask Shorthand: the mask property</a>
    <li><a href="#ref-for-elementdef-defs①⓪">8.1. Mask Border Image Source: the mask-border-source property</a>
    <li><a href="#ref-for-elementdef-defs①①">8.2. Mask Border Image Interpretation: the mask-border-mode property</a>
    <li><a href="#ref-for-elementdef-defs①②">8.3. Mask Border Image Slicing: the mask-border-slice property</a>
    <li><a href="#ref-for-elementdef-defs①③">8.4. Masking Areas: the mask-border-width property</a>
    <li><a href="#ref-for-elementdef-defs①④">8.5. Edge Overhang: the mask-border-outset property</a>
    <li><a href="#ref-for-elementdef-defs①⑤">8.6. Mask Border Image Tiling: the mask-border-repeat property</a>
    <li><a href="#ref-for-elementdef-defs①⑥">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-desc">
   <a href="https://svgwg.org/svg2-draft/struct.html#elementdef-desc">https://svgwg.org/svg2-draft/struct.html#elementdef-desc</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-desc">6.1. The clipPath element</a>
    <li><a href="#ref-for-elementdef-desc①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-ellipse">
   <a href="https://svgwg.org/svg2-draft/shapes.html#elementdef-ellipse">https://svgwg.org/svg2-draft/shapes.html#elementdef-ellipse</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-ellipse">6.1. The clipPath element</a>
    <li><a href="#ref-for-elementdef-ellipse①">9.1. The mask element</a>
    <li><a href="#ref-for-elementdef-ellipse②">Appendix B: Compute stroke bounding box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-FillProperty">
   <a href="https://svgwg.org/svg2-draft/painting.html#FillProperty">https://svgwg.org/svg2-draft/painting.html#FillProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-FillProperty">6.1. The clipPath element</a> <a href="#ref-for-FillProperty①">(2)</a>
    <li><a href="#ref-for-FillProperty②">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-FillOpacityProperty">
   <a href="https://svgwg.org/svg2-draft/painting.html#FillOpacityProperty">https://svgwg.org/svg2-draft/painting.html#FillOpacityProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-FillOpacityProperty">6.1. The clipPath element</a>
    <li><a href="#ref-for-FillOpacityProperty①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-FillRuleProperty">
   <a href="https://svgwg.org/svg2-draft/painting.html#FillRuleProperty">https://svgwg.org/svg2-draft/painting.html#FillRuleProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-FillRuleProperty">6.1. The clipPath element</a>
    <li><a href="#ref-for-FillRuleProperty①">6.2. Winding Rules: the clip-rule property</a> <a href="#ref-for-FillRuleProperty②">(2)</a> <a href="#ref-for-FillRuleProperty③">(3)</a>
    <li><a href="#ref-for-FillRuleProperty④">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-foreignObject">
   <a href="https://svgwg.org/svg2-draft/embedded.html#elementdef-foreignObject">https://svgwg.org/svg2-draft/embedded.html#elementdef-foreignObject</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-foreignObject">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-g">
   <a href="https://svgwg.org/svg2-draft/struct.html#elementdef-g">https://svgwg.org/svg2-draft/struct.html#elementdef-g</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-g">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-graphics-element">
   <a href="https://svgwg.org/svg2-draft/struct.html#graphics-element">https://svgwg.org/svg2-draft/struct.html#graphics-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-graphics-element">1.1. Clipping</a>
    <li><a href="#ref-for-graphics-element①">5.1. Clipping Shape: the clip-path property</a>
    <li><a href="#ref-for-graphics-element②">6.1. The clipPath element</a>
    <li><a href="#ref-for-graphics-element③">6.2. Winding Rules: the clip-rule property</a> <a href="#ref-for-graphics-element④">(2)</a> <a href="#ref-for-graphics-element⑤">(3)</a>
    <li><a href="#ref-for-graphics-element⑥">7.1. Mask Image Source: the mask-image property</a>
    <li><a href="#ref-for-graphics-element⑦">7.2. Mask Image Interpretation: the mask-mode property</a>
    <li><a href="#ref-for-graphics-element⑧">7.3. Tiling Mask Images: the mask-repeat property</a>
    <li><a href="#ref-for-graphics-element⑨">7.4. Positioning Mask Images: the mask-position property</a>
    <li><a href="#ref-for-graphics-element①⓪">7.5. Masking Area: the mask-clip property</a>
    <li><a href="#ref-for-graphics-element①①">7.6. Positioning Area: the mask-origin property</a>
    <li><a href="#ref-for-graphics-element①②">7.7. Sizing Mask Images: the mask-size property</a>
    <li><a href="#ref-for-graphics-element①③">7.8. Compositing mask layers: the mask-composite property</a>
    <li><a href="#ref-for-graphics-element①④">7.9. Mask Shorthand: the mask property</a>
    <li><a href="#ref-for-graphics-element①⑤">7.10.1. Mask processing</a>
    <li><a href="#ref-for-graphics-element①⑥">8.1. Mask Border Image Source: the mask-border-source property</a>
    <li><a href="#ref-for-graphics-element①⑦">8.2. Mask Border Image Interpretation: the mask-border-mode property</a>
    <li><a href="#ref-for-graphics-element①⑧">8.3. Mask Border Image Slicing: the mask-border-slice property</a>
    <li><a href="#ref-for-graphics-element①⑨">8.4. Masking Areas: the mask-border-width property</a>
    <li><a href="#ref-for-graphics-element②⓪">8.5. Edge Overhang: the mask-border-outset property</a>
    <li><a href="#ref-for-graphics-element②①">8.6. Mask Border Image Tiling: the mask-border-repeat property</a>
    <li><a href="#ref-for-graphics-element②②">Appendix B: Compute stroke bounding box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-image">
   <a href="https://svgwg.org/svg2-draft/embedded.html#elementdef-image">https://svgwg.org/svg2-draft/embedded.html#elementdef-image</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-image">9.1. The mask element</a>
    <li><a href="#ref-for-elementdef-image①">Appendix B: Compute stroke bounding box</a> <a href="#ref-for-elementdef-image②">(2)</a> <a href="#ref-for-elementdef-image③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-line">
   <a href="https://svgwg.org/svg2-draft/shapes.html#elementdef-line">https://svgwg.org/svg2-draft/shapes.html#elementdef-line</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-line">6.1. The clipPath element</a>
    <li><a href="#ref-for-elementdef-line①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-linearGradient">
   <a href="https://svgwg.org/svg2-draft/pservers.html#elementdef-linearGradient">https://svgwg.org/svg2-draft/pservers.html#elementdef-linearGradient</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-linearGradient">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-MarkerProperty">
   <a href="https://svgwg.org/svg2-draft/painting.html#MarkerProperty">https://svgwg.org/svg2-draft/painting.html#MarkerProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-MarkerProperty">6.1. The clipPath element</a>
    <li><a href="#ref-for-MarkerProperty①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-MarkerEndProperty">
   <a href="https://svgwg.org/svg2-draft/painting.html#MarkerEndProperty">https://svgwg.org/svg2-draft/painting.html#MarkerEndProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-MarkerEndProperty">6.1. The clipPath element</a>
    <li><a href="#ref-for-MarkerEndProperty①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-MarkerMidProperty">
   <a href="https://svgwg.org/svg2-draft/painting.html#MarkerMidProperty">https://svgwg.org/svg2-draft/painting.html#MarkerMidProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-MarkerMidProperty">6.1. The clipPath element</a>
    <li><a href="#ref-for-MarkerMidProperty①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-MarkerStartProperty">
   <a href="https://svgwg.org/svg2-draft/painting.html#MarkerStartProperty">https://svgwg.org/svg2-draft/painting.html#MarkerStartProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-MarkerStartProperty">6.1. The clipPath element</a>
    <li><a href="#ref-for-MarkerStartProperty①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-metadata">
   <a href="https://svgwg.org/svg2-draft/struct.html#elementdef-metadata">https://svgwg.org/svg2-draft/struct.html#elementdef-metadata</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-metadata">6.1. The clipPath element</a>
    <li><a href="#ref-for-elementdef-metadata①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-TermNeverRenderedElement">
   <a href="https://svgwg.org/svg2-draft/render.html#TermNeverRenderedElement">https://svgwg.org/svg2-draft/render.html#TermNeverRenderedElement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-TermNeverRenderedElement">6.1. The clipPath element</a>
    <li><a href="#ref-for-TermNeverRenderedElement①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-TermObjectBoundingBox">
   <a href="https://svgwg.org/svg2-draft/coords.html#TermObjectBoundingBox">https://svgwg.org/svg2-draft/coords.html#TermObjectBoundingBox</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-TermObjectBoundingBox">2. Module interactions</a>
    <li><a href="#ref-for-TermObjectBoundingBox①">5.1. Clipping Shape: the clip-path property</a>
    <li><a href="#ref-for-TermObjectBoundingBox②">7.5. Masking Area: the mask-clip property</a>
    <li><a href="#ref-for-TermObjectBoundingBox③">7.6. Positioning Area: the mask-origin property</a>
    <li><a href="#ref-for-TermObjectBoundingBox④">9.1. The mask element</a>
    <li><a href="#ref-for-TermObjectBoundingBox⑤">Appendix B: Compute stroke bounding box</a> <a href="#ref-for-TermObjectBoundingBox⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-path">
   <a href="https://svgwg.org/svg2-draft/paths.html#elementdef-path">https://svgwg.org/svg2-draft/paths.html#elementdef-path</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-path">6.1. The clipPath element</a> <a href="#ref-for-elementdef-path①">(2)</a> <a href="#ref-for-elementdef-path②">(3)</a>
    <li><a href="#ref-for-elementdef-path③">6.2. Winding Rules: the clip-rule property</a>
    <li><a href="#ref-for-elementdef-path④">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-pattern">
   <a href="https://svgwg.org/svg2-draft/pservers.html#elementdef-pattern">https://svgwg.org/svg2-draft/pservers.html#elementdef-pattern</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-pattern">9.1. The mask element</a>
    <li><a href="#ref-for-elementdef-pattern①">Appendix A: The deprecated clip property</a> <a href="#ref-for-elementdef-pattern②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-PointerEventsProperty">
   <a href="https://svgwg.org/svg2-draft/interact.html#PointerEventsProperty">https://svgwg.org/svg2-draft/interact.html#PointerEventsProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-PointerEventsProperty">5. Clipping Paths</a>
    <li><a href="#ref-for-PointerEventsProperty①">6.1. The clipPath element</a>
    <li><a href="#ref-for-PointerEventsProperty②">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-polygon">
   <a href="https://svgwg.org/svg2-draft/shapes.html#elementdef-polygon">https://svgwg.org/svg2-draft/shapes.html#elementdef-polygon</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-polygon">6.1. The clipPath element</a>
    <li><a href="#ref-for-elementdef-polygon①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-polyline">
   <a href="https://svgwg.org/svg2-draft/shapes.html#elementdef-polyline">https://svgwg.org/svg2-draft/shapes.html#elementdef-polyline</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-polyline">6.1. The clipPath element</a>
    <li><a href="#ref-for-elementdef-polyline①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-radialGradient">
   <a href="https://svgwg.org/svg2-draft/pservers.html#elementdef-radialGradient">https://svgwg.org/svg2-draft/pservers.html#elementdef-radialGradient</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-radialGradient">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-rect">
   <a href="https://svgwg.org/svg2-draft/shapes.html#elementdef-rect">https://svgwg.org/svg2-draft/shapes.html#elementdef-rect</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-rect">6.1. The clipPath element</a>
    <li><a href="#ref-for-elementdef-rect①">9.1. The mask element</a>
    <li><a href="#ref-for-elementdef-rect②">Appendix B: Compute stroke bounding box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-script">
   <a href="https://svgwg.org/svg2-draft/interact.html#elementdef-script">https://svgwg.org/svg2-draft/interact.html#elementdef-script</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-script">6.1. The clipPath element</a>
    <li><a href="#ref-for-elementdef-script①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ShapeRenderingProperty">
   <a href="https://svgwg.org/svg2-draft/painting.html#ShapeRenderingProperty">https://svgwg.org/svg2-draft/painting.html#ShapeRenderingProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ShapeRenderingProperty">6.1. The clipPath element</a>
    <li><a href="#ref-for-ShapeRenderingProperty①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-StopColorProperty">
   <a href="https://svgwg.org/svg2-draft/pservers.html#StopColorProperty">https://svgwg.org/svg2-draft/pservers.html#StopColorProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-StopColorProperty">6.1. The clipPath element</a>
    <li><a href="#ref-for-StopColorProperty①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-StopOpacityProperty">
   <a href="https://svgwg.org/svg2-draft/pservers.html#StopOpacityProperty">https://svgwg.org/svg2-draft/pservers.html#StopOpacityProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-StopOpacityProperty">6.1. The clipPath element</a>
    <li><a href="#ref-for-StopOpacityProperty①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-StrokeProperty">
   <a href="https://svgwg.org/svg2-draft/painting.html#StrokeProperty">https://svgwg.org/svg2-draft/painting.html#StrokeProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-StrokeProperty">6.1. The clipPath element</a> <a href="#ref-for-StrokeProperty①">(2)</a>
    <li><a href="#ref-for-StrokeProperty②">9.1. The mask element</a>
    <li><a href="#ref-for-StrokeProperty③">Appendix B: Compute stroke bounding box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-StrokeDasharrayProperty">
   <a href="https://svgwg.org/svg2-draft/painting.html#StrokeDasharrayProperty">https://svgwg.org/svg2-draft/painting.html#StrokeDasharrayProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-StrokeDasharrayProperty">6.1. The clipPath element</a>
    <li><a href="#ref-for-StrokeDasharrayProperty①">9.1. The mask element</a>
    <li><a href="#ref-for-StrokeDasharrayProperty②">Appendix B: Compute stroke bounding box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-StrokeDashoffsetProperty">
   <a href="https://svgwg.org/svg2-draft/painting.html#StrokeDashoffsetProperty">https://svgwg.org/svg2-draft/painting.html#StrokeDashoffsetProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-StrokeDashoffsetProperty">6.1. The clipPath element</a>
    <li><a href="#ref-for-StrokeDashoffsetProperty①">9.1. The mask element</a>
    <li><a href="#ref-for-StrokeDashoffsetProperty②">Appendix B: Compute stroke bounding box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-StrokeLinecapProperty">
   <a href="https://svgwg.org/svg2-draft/painting.html#StrokeLinecapProperty">https://svgwg.org/svg2-draft/painting.html#StrokeLinecapProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-StrokeLinecapProperty">6.1. The clipPath element</a>
    <li><a href="#ref-for-StrokeLinecapProperty①">9.1. The mask element</a>
    <li><a href="#ref-for-StrokeLinecapProperty②">Appendix B: Compute stroke bounding box</a> <a href="#ref-for-StrokeLinecapProperty③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-StrokeLinejoinProperty">
   <a href="https://svgwg.org/svg2-draft/painting.html#StrokeLinejoinProperty">https://svgwg.org/svg2-draft/painting.html#StrokeLinejoinProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-StrokeLinejoinProperty">6.1. The clipPath element</a>
    <li><a href="#ref-for-StrokeLinejoinProperty①">9.1. The mask element</a>
    <li><a href="#ref-for-StrokeLinejoinProperty②">Appendix B: Compute stroke bounding box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-StrokeMiterlimitProperty">
   <a href="https://svgwg.org/svg2-draft/painting.html#StrokeMiterlimitProperty">https://svgwg.org/svg2-draft/painting.html#StrokeMiterlimitProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-StrokeMiterlimitProperty">6.1. The clipPath element</a>
    <li><a href="#ref-for-StrokeMiterlimitProperty①">9.1. The mask element</a>
    <li><a href="#ref-for-StrokeMiterlimitProperty②">Appendix B: Compute stroke bounding box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-StrokeOpacityProperty">
   <a href="https://svgwg.org/svg2-draft/painting.html#StrokeOpacityProperty">https://svgwg.org/svg2-draft/painting.html#StrokeOpacityProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-StrokeOpacityProperty">6.1. The clipPath element</a>
    <li><a href="#ref-for-StrokeOpacityProperty①">9.1. The mask element</a>
    <li><a href="#ref-for-StrokeOpacityProperty②">Appendix B: Compute stroke bounding box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-StrokeWidthProperty">
   <a href="https://svgwg.org/svg2-draft/painting.html#StrokeWidthProperty">https://svgwg.org/svg2-draft/painting.html#StrokeWidthProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-StrokeWidthProperty">6.1. The clipPath element</a> <a href="#ref-for-StrokeWidthProperty①">(2)</a>
    <li><a href="#ref-for-StrokeWidthProperty②">9.1. The mask element</a>
    <li><a href="#ref-for-StrokeWidthProperty③">Appendix B: Compute stroke bounding box</a> <a href="#ref-for-StrokeWidthProperty④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-style">
   <a href="https://svgwg.org/svg2-draft/styling.html#elementdef-style">https://svgwg.org/svg2-draft/styling.html#elementdef-style</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-style">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-svg">
   <a href="https://svgwg.org/svg2-draft/struct.html#elementdef-svg">https://svgwg.org/svg2-draft/struct.html#elementdef-svg</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-svg">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-switch">
   <a href="https://svgwg.org/svg2-draft/struct.html#elementdef-switch">https://svgwg.org/svg2-draft/struct.html#elementdef-switch</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-switch">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-symbol">
   <a href="https://svgwg.org/svg2-draft/struct.html#elementdef-symbol">https://svgwg.org/svg2-draft/struct.html#elementdef-symbol</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-symbol">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-text">
   <a href="https://svgwg.org/svg2-draft/text.html#elementdef-text">https://svgwg.org/svg2-draft/text.html#elementdef-text</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-text">6.1. The clipPath element</a> <a href="#ref-for-elementdef-text①">(2)</a> <a href="#ref-for-elementdef-text②">(3)</a>
    <li><a href="#ref-for-elementdef-text③">7.10.1. Mask processing</a>
    <li><a href="#ref-for-elementdef-text④">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-TermTextContentElement">
   <a href="https://svgwg.org/svg2-draft/text.html#TermTextContentElement">https://svgwg.org/svg2-draft/text.html#TermTextContentElement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-TermTextContentElement">Appendix B: Compute stroke bounding box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-TextAnchorProperty">
   <a href="https://svgwg.org/svg2-draft/text.html#TextAnchorProperty">https://svgwg.org/svg2-draft/text.html#TextAnchorProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-TextAnchorProperty">6.1. The clipPath element</a>
    <li><a href="#ref-for-TextAnchorProperty①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-TextRenderingProperty">
   <a href="https://svgwg.org/svg2-draft/painting.html#TextRenderingProperty">https://svgwg.org/svg2-draft/painting.html#TextRenderingProperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-TextRenderingProperty">6.1. The clipPath element</a>
    <li><a href="#ref-for-TextRenderingProperty①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-title">
   <a href="https://svgwg.org/svg2-draft/struct.html#elementdef-title">https://svgwg.org/svg2-draft/struct.html#elementdef-title</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-title">6.1. The clipPath element</a>
    <li><a href="#ref-for-elementdef-title①">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-use">
   <a href="https://svgwg.org/svg2-draft/struct.html#elementdef-use">https://svgwg.org/svg2-draft/struct.html#elementdef-use</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-use">5. Clipping Paths</a>
    <li><a href="#ref-for-elementdef-use①">5.1. Clipping Shape: the clip-path property</a>
    <li><a href="#ref-for-elementdef-use②">6.1. The clipPath element</a> <a href="#ref-for-elementdef-use③">(2)</a> <a href="#ref-for-elementdef-use④">(3)</a>
    <li><a href="#ref-for-elementdef-use⑤">7.1. Mask Image Source: the mask-image property</a>
    <li><a href="#ref-for-elementdef-use⑥">7.2. Mask Image Interpretation: the mask-mode property</a>
    <li><a href="#ref-for-elementdef-use⑦">7.3. Tiling Mask Images: the mask-repeat property</a>
    <li><a href="#ref-for-elementdef-use⑧">7.4. Positioning Mask Images: the mask-position property</a>
    <li><a href="#ref-for-elementdef-use⑨">7.5. Masking Area: the mask-clip property</a>
    <li><a href="#ref-for-elementdef-use①⓪">7.6. Positioning Area: the mask-origin property</a>
    <li><a href="#ref-for-elementdef-use①①">7.7. Sizing Mask Images: the mask-size property</a>
    <li><a href="#ref-for-elementdef-use①②">7.9. Mask Shorthand: the mask property</a>
    <li><a href="#ref-for-elementdef-use①③">8.1. Mask Border Image Source: the mask-border-source property</a>
    <li><a href="#ref-for-elementdef-use①④">8.2. Mask Border Image Interpretation: the mask-border-mode property</a>
    <li><a href="#ref-for-elementdef-use①⑤">8.3. Mask Border Image Slicing: the mask-border-slice property</a>
    <li><a href="#ref-for-elementdef-use①⑥">8.4. Masking Areas: the mask-border-width property</a>
    <li><a href="#ref-for-elementdef-use①⑦">8.5. Edge Overhang: the mask-border-outset property</a>
    <li><a href="#ref-for-elementdef-use①⑧">8.6. Mask Border Image Tiling: the mask-border-repeat property</a>
    <li><a href="#ref-for-elementdef-use①⑨">9.1. The mask element</a>
    <li><a href="#ref-for-elementdef-use②⓪">Appendix B: Compute stroke bounding box</a> <a href="#ref-for-elementdef-use②①">(2)</a> <a href="#ref-for-elementdef-use②②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-view">
   <a href="https://svgwg.org/svg2-draft/linking.html#elementdef-view">https://svgwg.org/svg2-draft/linking.html#elementdef-view</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-view">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ViewBoxAttribute">
   <a href="https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute">https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ViewBoxAttribute">5.1. Clipping Shape: the clip-path property</a> <a href="#ref-for-ViewBoxAttribute①">(2)</a> <a href="#ref-for-ViewBoxAttribute②">(3)</a>
    <li><a href="#ref-for-ViewBoxAttribute③">7.5. Masking Area: the mask-clip property</a> <a href="#ref-for-ViewBoxAttribute④">(2)</a> <a href="#ref-for-ViewBoxAttribute⑤">(3)</a>
    <li><a href="#ref-for-ViewBoxAttribute⑥">7.6. Positioning Area: the mask-origin property</a> <a href="#ref-for-ViewBoxAttribute⑦">(2)</a> <a href="#ref-for-ViewBoxAttribute⑧">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">Interface SVGClipPathElement</a>
    <li><a href="#ref-for-Exposed①">Interface SVGMaskElement</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-break-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-box-decoration-break" style="color:initial">box-decoration-break</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-cascade-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-used-value" style="color:initial">used value</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-color-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-color" style="color:initial">color</span>
     <li><span class="dfn-paneled" id="term-for-propdef-opacity" style="color:initial">opacity</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-display-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-display" style="color:initial">display</span>
     <li><span class="dfn-paneled" id="term-for-valdef-display-none" style="color:initial">none</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-fonts-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-font" style="color:initial">font</span>
     <li><span class="dfn-paneled" id="term-for-propdef-font-family" style="color:initial">font-family</span>
     <li><span class="dfn-paneled" id="term-for-propdef-font-size" style="color:initial">font-size</span>
     <li><span class="dfn-paneled" id="term-for-propdef-font-style" style="color:initial">font-style</span>
     <li><span class="dfn-paneled" id="term-for-propdef-font-variant" style="color:initial">font-variant</span>
     <li><span class="dfn-paneled" id="term-for-propdef-font-weight" style="color:initial">font-weight</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-fonts-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-font-size-adjust" style="color:initial">font-size-adjust</span>
     <li><span class="dfn-paneled" id="term-for-propdef-font-stretch" style="color:initial">font-stretch</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-inline-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-alignment-baseline" style="color:initial">alignment-baseline</span>
     <li><span class="dfn-paneled" id="term-for-propdef-baseline-shift" style="color:initial">baseline-shift</span>
     <li><span class="dfn-paneled" id="term-for-propdef-dominant-baseline" style="color:initial">dominant-baseline</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-overflow-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-overflow" style="color:initial">overflow</span>
     <li><span class="dfn-paneled" id="term-for-valdef-overflow-visible" style="color:initial">visible</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-position-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-stacking-context" style="color:initial">stacking context</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-SHAPES]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-shape-box" style="color:initial">&lt;shape-box></span>
     <li><span class="dfn-paneled" id="term-for-funcdef-polygon" style="color:initial">polygon()</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-shapes-2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-basic-shape" style="color:initial">&lt;basic-shape></span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-text-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-letter-spacing" style="color:initial">letter-spacing</span>
     <li><span class="dfn-paneled" id="term-for-propdef-word-spacing" style="color:initial">word-spacing</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-text-decor-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-text-decoration" style="color:initial">text-decoration</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-ui-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-cursor" style="color:initial">cursor</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-mult-comma" style="color:initial">#</span>
     <li><span class="dfn-paneled" id="term-for-typedef-length-percentage" style="color:initial">&lt;length-percentage></span>
     <li><span class="dfn-paneled" id="term-for-typedef-position" style="color:initial">&lt;position></span>
     <li><span class="dfn-paneled" id="term-for-mult-opt" style="color:initial">?</span>
     <li><span class="dfn-paneled" id="term-for-px" style="color:initial">px</span>
     <li><span class="dfn-paneled" id="term-for-mult-num-range" style="color:initial">{a,b}</span>
     <li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span>
     <li><span class="dfn-paneled" id="term-for-comb-any" style="color:initial">||</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-writing-modes-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-direction" style="color:initial">direction</span>
     <li><span class="dfn-paneled" id="term-for-propdef-unicode-bidi" style="color:initial">unicode-bidi</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-writing-modes-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-glyph-orientation-vertical" style="color:initial">glyph-orientation-vertical</span>
     <li><span class="dfn-paneled" id="term-for-propdef-writing-mode" style="color:initial">writing-mode</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS21]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-visibility" style="color:initial">visibility</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css3-images]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-image" style="color:initial">&lt;image></span>
     <li><span class="dfn-paneled" id="term-for-propdef-image-rendering" style="color:initial">image-rendering</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3-TRANSFORMS]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-transform" style="color:initial">transform</span>
     <li><span class="dfn-paneled" id="term-for-user-coordinate-system" style="color:initial">user coordinate system</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3BG]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-bg-size" style="color:initial">&lt;bg-size></span>
     <li><span class="dfn-paneled" id="term-for-typedef-repeat-style" style="color:initial">&lt;repeat-style></span>
     <li><span class="dfn-paneled" id="term-for-propdef-background" style="color:initial">background</span>
     <li><span class="dfn-paneled" id="term-for-background-painting-area" style="color:initial">background painting area</span>
     <li><span class="dfn-paneled" id="term-for-background-positioning-area" style="color:initial">background positioning area</span>
     <li><span class="dfn-paneled" id="term-for-propdef-background-origin" style="color:initial">background-origin</span>
     <li><span class="dfn-paneled" id="term-for-propdef-background-position" style="color:initial">background-position</span>
     <li><span class="dfn-paneled" id="term-for-propdef-background-repeat" style="color:initial">background-repeat</span>
     <li><span class="dfn-paneled" id="term-for-propdef-background-size" style="color:initial">background-size</span>
     <li><span class="dfn-paneled" id="term-for-border-image-area" style="color:initial">border image area</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-image" style="color:initial">border-image</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-image-repeat" style="color:initial">border-image-repeat</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-image-slice" style="color:initial">border-image-slice</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-image-width" style="color:initial">border-image-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-radius" style="color:initial">border-radius</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-width" style="color:initial">border-width</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3VAL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-length-value" style="color:initial">&lt;length></span>
     <li><span class="dfn-paneled" id="term-for-typedef-number-percentage" style="color:initial">&lt;number-percentage></span>
     <li><span class="dfn-paneled" id="term-for-number-value" style="color:initial">&lt;number></span>
     <li><span class="dfn-paneled" id="term-for-url-value" style="color:initial">&lt;url></span>
    </ul>
   <li>
    <a data-link-type="biblio">[fill-stroke-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-svg-paint-child" style="color:initial">child</span>
     <li><span class="dfn-paneled" id="term-for-valdef-stroke-linejoin-miter" style="color:initial">miter</span>
     <li><span class="dfn-paneled" id="term-for-valdef-stroke-linecap-square" style="color:initial">square</span>
    </ul>
   <li>
    <a data-link-type="biblio">[FILTER-EFFECTS]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-color-interpolation-filters" style="color:initial">color-interpolation-filters</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-fecolormatrix" style="color:initial">fecolormatrix</span>
     <li><span class="dfn-paneled" id="term-for-propdef-filter" style="color:initial">filter</span>
     <li><span class="dfn-paneled" id="term-for-propdef-flood-color" style="color:initial">flood-color</span>
     <li><span class="dfn-paneled" id="term-for-propdef-flood-opacity" style="color:initial">flood-opacity</span>
     <li><span class="dfn-paneled" id="term-for-propdef-lighting-color" style="color:initial">lighting-color</span>
     <li><span class="dfn-paneled" id="term-for-valdef-color-interpolation-filters-linearrgb" style="color:initial">linearrgb</span>
    </ul>
   <li>
    <a data-link-type="biblio">[SVG11]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-AlternateGlyphDefinitions" style="color:initial">altglyphdef</span>
     <li><span class="dfn-paneled" id="term-for-AnimateElement" style="color:initial">animate</span>
     <li><span class="dfn-paneled" id="term-for-AnimateColorElement" style="color:initial">animatecolor</span>
     <li><span class="dfn-paneled" id="term-for-AnimateMotionElement" style="color:initial">animatemotion</span>
     <li><span class="dfn-paneled" id="term-for-AnimateTransformElement" style="color:initial">animatetransform</span>
     <li><span class="dfn-paneled" id="term-for-ColorProfileProperty" style="color:initial">color-profile</span>
     <li><span class="dfn-paneled" id="term-for-ColorRenderingProperty" style="color:initial">color-rendering</span>
     <li><span class="dfn-paneled" id="term-for-CursorElement" style="color:initial">cursor</span>
     <li><span class="dfn-paneled" id="term-for-EnableBackgroundProperty" style="color:initial">enable-background</span>
     <li><span class="dfn-paneled" id="term-for-FontElement" style="color:initial">font</span>
     <li><span class="dfn-paneled" id="term-for-FontFaceElement" style="color:initial">font-face</span>
     <li><span class="dfn-paneled" id="term-for-GlyphOrientationHorizontalProperty" style="color:initial">glyph-orientation-horizontal</span>
     <li><span class="dfn-paneled" id="term-for-KerningProperty" style="color:initial">kerning</span>
     <li><span class="dfn-paneled" id="term-for-SetElement" style="color:initial">set</span>
    </ul>
   <li>
    <a data-link-type="biblio">[SVG2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-InterfaceSVGAnimatedEnumeration" style="color:initial">SVGAnimatedEnumeration</span>
     <li><span class="dfn-paneled" id="term-for-InterfaceSVGAnimatedLength" style="color:initial">SVGAnimatedLength</span>
     <li><span class="dfn-paneled" id="term-for-InterfaceSVGAnimatedTransformList" style="color:initial">SVGAnimatedTransformList</span>
     <li><span class="dfn-paneled" id="term-for-InterfaceSVGElement" style="color:initial">SVGElement</span>
     <li><span class="dfn-paneled" id="term-for-InterfaceSVGUnitTypes" style="color:initial">SVGUnitTypes</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-a" style="color:initial">a</span>
     <li><span class="dfn-paneled" id="term-for-basic-shape" style="color:initial">basic shape</span>
     <li><span class="dfn-paneled" id="term-for-bounding-box" style="color:initial">bounding box</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-circle" style="color:initial">circle</span>
     <li><span class="dfn-paneled" id="term-for-ColorInterpolationProperty" style="color:initial">color-interpolation</span>
     <li><span class="dfn-paneled" id="term-for-container-element" style="color:initial">container element</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-defs" style="color:initial">defs</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-desc" style="color:initial">desc</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-ellipse" style="color:initial">ellipse</span>
     <li><span class="dfn-paneled" id="term-for-FillProperty" style="color:initial">fill</span>
     <li><span class="dfn-paneled" id="term-for-FillOpacityProperty" style="color:initial">fill-opacity</span>
     <li><span class="dfn-paneled" id="term-for-FillRuleProperty" style="color:initial">fill-rule</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-foreignObject" style="color:initial">foreignobject</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-g" style="color:initial">g</span>
     <li><span class="dfn-paneled" id="term-for-graphics-element" style="color:initial">graphics element</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-image" style="color:initial">image</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-line" style="color:initial">line</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-linearGradient" style="color:initial">lineargradient</span>
     <li><span class="dfn-paneled" id="term-for-MarkerProperty" style="color:initial">marker</span>
     <li><span class="dfn-paneled" id="term-for-MarkerEndProperty" style="color:initial">marker-end</span>
     <li><span class="dfn-paneled" id="term-for-MarkerMidProperty" style="color:initial">marker-mid</span>
     <li><span class="dfn-paneled" id="term-for-MarkerStartProperty" style="color:initial">marker-start</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-metadata" style="color:initial">metadata</span>
     <li><span class="dfn-paneled" id="term-for-TermNeverRenderedElement" style="color:initial">never-rendered element</span>
     <li><span class="dfn-paneled" id="term-for-TermObjectBoundingBox" style="color:initial">object bounding box</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-path" style="color:initial">path</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-pattern" style="color:initial">pattern</span>
     <li><span class="dfn-paneled" id="term-for-PointerEventsProperty" style="color:initial">pointer-events</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-polygon" style="color:initial">polygon</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-polyline" style="color:initial">polyline</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-radialGradient" style="color:initial">radialgradient</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-rect" style="color:initial">rect</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-script" style="color:initial">script</span>
     <li><span class="dfn-paneled" id="term-for-ShapeRenderingProperty" style="color:initial">shape-rendering</span>
     <li><span class="dfn-paneled" id="term-for-StopColorProperty" style="color:initial">stop-color</span>
     <li><span class="dfn-paneled" id="term-for-StopOpacityProperty" style="color:initial">stop-opacity</span>
     <li><span class="dfn-paneled" id="term-for-StrokeProperty" style="color:initial">stroke</span>
     <li><span class="dfn-paneled" id="term-for-StrokeDasharrayProperty" style="color:initial">stroke-dasharray</span>
     <li><span class="dfn-paneled" id="term-for-StrokeDashoffsetProperty" style="color:initial">stroke-dashoffset</span>
     <li><span class="dfn-paneled" id="term-for-StrokeLinecapProperty" style="color:initial">stroke-linecap</span>
     <li><span class="dfn-paneled" id="term-for-StrokeLinejoinProperty" style="color:initial">stroke-linejoin</span>
     <li><span class="dfn-paneled" id="term-for-StrokeMiterlimitProperty" style="color:initial">stroke-miterlimit</span>
     <li><span class="dfn-paneled" id="term-for-StrokeOpacityProperty" style="color:initial">stroke-opacity</span>
     <li><span class="dfn-paneled" id="term-for-StrokeWidthProperty" style="color:initial">stroke-width</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-style" style="color:initial">style</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-svg" style="color:initial">svg</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-switch" style="color:initial">switch</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-symbol" style="color:initial">symbol</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-text" style="color:initial">text</span>
     <li><span class="dfn-paneled" id="term-for-TermTextContentElement" style="color:initial">text content element</span>
     <li><span class="dfn-paneled" id="term-for-TextAnchorProperty" style="color:initial">text-anchor</span>
     <li><span class="dfn-paneled" id="term-for-TextRenderingProperty" style="color:initial">text-rendering</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-title" style="color:initial">title</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-use" style="color:initial">use</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-view" style="color:initial">view</span>
     <li><span class="dfn-paneled" id="term-for-ViewBoxAttribute" style="color:initial">viewbox</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-compositing-1">[COMPOSITING-1]
   <dd>Rik Cabanier; Nikos Andronikos. <a href="https://www.w3.org/TR/compositing-1/">Compositing and Blending Level 1</a>. 13 January 2015. CR. URL: <a href="https://www.w3.org/TR/compositing-1/">https://www.w3.org/TR/compositing-1/</a>
   <dt id="biblio-css-break-4">[CSS-BREAK-4]
   <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-4/">CSS Fragmentation Module Level 4</a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-break-4/">https://www.w3.org/TR/css-break-4/</a>
   <dt id="biblio-css-cascade-4">[CSS-CASCADE-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-cascade-4/">https://www.w3.org/TR/css-cascade-4/</a>
   <dt id="biblio-css-color-4">[CSS-COLOR-4]
   <dd>Tab Atkins Jr.; Chris Lilley. <a href="https://www.w3.org/TR/css-color-4/">CSS Color Module Level 4</a>. 5 March 2019. WD. URL: <a href="https://www.w3.org/TR/css-color-4/">https://www.w3.org/TR/css-color-4/</a>
   <dt id="biblio-css-display-3">[CSS-DISPLAY-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a>
   <dt id="biblio-css-fonts-3">[CSS-FONTS-3]
   <dd>John Daggett; Myles Maxfield; Chris Lilley. <a href="https://www.w3.org/TR/css-fonts-3/">CSS Fonts Module Level 3</a>. 20 September 2018. REC. URL: <a href="https://www.w3.org/TR/css-fonts-3/">https://www.w3.org/TR/css-fonts-3/</a>
   <dt id="biblio-css-fonts-4">[CSS-FONTS-4]
   <dd>John Daggett; Myles Maxfield; Chris Lilley. <a href="https://www.w3.org/TR/css-fonts-4/">CSS Fonts Module Level 4</a>. 20 September 2018. WD. URL: <a href="https://www.w3.org/TR/css-fonts-4/">https://www.w3.org/TR/css-fonts-4/</a>
   <dt id="biblio-css-inline-3">[CSS-INLINE-3]
   <dd>Dave Cramer; Elika Etemad; Steve Zilles. <a href="https://www.w3.org/TR/css-inline-3/">CSS Inline Layout Module Level 3</a>. 8 August 2018. WD. URL: <a href="https://www.w3.org/TR/css-inline-3/">https://www.w3.org/TR/css-inline-3/</a>
   <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3]
   <dd>David Baron; Elika Etemad; Florian Rivoal. <a href="https://www.w3.org/TR/css-overflow-3/">CSS Overflow Module Level 3</a>. 31 July 2018. WD. URL: <a href="https://www.w3.org/TR/css-overflow-3/">https://www.w3.org/TR/css-overflow-3/</a>
   <dt id="biblio-css-position-3">[CSS-POSITION-3]
   <dd>Rossen Atanassov; Arron Eicholz. <a href="https://www.w3.org/TR/css-position-3/">CSS Positioned Layout Module Level 3</a>. 17 May 2016. WD. URL: <a href="https://www.w3.org/TR/css-position-3/">https://www.w3.org/TR/css-position-3/</a>
   <dt id="biblio-css-shapes">[CSS-SHAPES]
   <dd>Vincent Hardy; Rossen Atanassov; Alan Stearns. <a href="https://www.w3.org/TR/css-shapes-1/">CSS Shapes Module Level 1</a>. 20 March 2014. CR. URL: <a href="https://www.w3.org/TR/css-shapes-1/">https://www.w3.org/TR/css-shapes-1/</a>
   <dt id="biblio-css-shapes-2">[CSS-SHAPES-2]
   <dd>CSS Shapes Module Level 2 URL: <a href="https://drafts.csswg.org/css-shapes-2/">https://drafts.csswg.org/css-shapes-2/</a>
   <dt id="biblio-css-text-3">[CSS-TEXT-3]
   <dd>Elika Etemad; Koji Ishii; Florian Rivoal. <a href="https://www.w3.org/TR/css-text-3/">CSS Text Module Level 3</a>. 12 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-text-3/">https://www.w3.org/TR/css-text-3/</a>
   <dt id="biblio-css-text-decor-3">[CSS-TEXT-DECOR-3]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>. 3 July 2018. CR. URL: <a href="https://www.w3.org/TR/css-text-decor-3/">https://www.w3.org/TR/css-text-decor-3/</a>
   <dt id="biblio-css-ui-4">[CSS-UI-4]
   <dd>Florian Rivoal. <a href="https://www.w3.org/TR/css-ui-4/">CSS Basic User Interface Module Level 4</a>. 22 December 2017. WD. URL: <a href="https://www.w3.org/TR/css-ui-4/">https://www.w3.org/TR/css-ui-4/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css-writing-modes-3">[CSS-WRITING-MODES-3]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-3/">CSS Writing Modes Level 3</a>. 24 May 2018. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-3/">https://www.w3.org/TR/css-writing-modes-3/</a>
   <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-4/">CSS Writing Modes Level 4</a>. 24 May 2018. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-4/">https://www.w3.org/TR/css-writing-modes-4/</a>
   <dt id="biblio-css21">[CSS21]
   <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS2/">https://www.w3.org/TR/CSS2/</a>
   <dt id="biblio-css3-images">[CSS3-IMAGES]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css3-images/">CSS Image Values and Replaced Content Module Level 3</a>. 17 April 2012. CR. URL: <a href="https://www.w3.org/TR/css3-images/">https://www.w3.org/TR/css3-images/</a>
   <dt id="biblio-css3-transforms">[CSS3-TRANSFORMS]
   <dd>Simon Fraser; et al. <a href="https://www.w3.org/TR/css-transforms-1/">CSS Transforms Module Level 1</a>. 14 February 2019. CR. URL: <a href="https://www.w3.org/TR/css-transforms-1/">https://www.w3.org/TR/css-transforms-1/</a>
   <dt id="biblio-css3bg">[CSS3BG]
   <dd>Bert Bos; Elika Etemad; Brad Kemper. <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders Module Level 3</a>. 17 October 2017. CR. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a>
   <dt id="biblio-css3val">[CSS3VAL]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Module Level 3</a>. 31 January 2019. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a>
   <dt id="biblio-fetch">[FETCH]
   <dd>Anne van Kesteren. <a href="https://fetch.spec.whatwg.org/">Fetch Standard</a>. Living Standard. URL: <a href="https://fetch.spec.whatwg.org/">https://fetch.spec.whatwg.org/</a>
   <dt id="biblio-fill-stroke-3">[FILL-STROKE-3]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/fill-stroke-3/">CSS Fill and Stroke Module Level 3</a>. 13 April 2017. WD. URL: <a href="https://www.w3.org/TR/fill-stroke-3/">https://www.w3.org/TR/fill-stroke-3/</a>
   <dt id="biblio-filter-effects">[FILTER-EFFECTS]
   <dd>Dirk Schulze; Dean Jackson. <a href="https://www.w3.org/TR/filter-effects-1/">Filter Effects Module Level 1</a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/filter-effects-1/">https://www.w3.org/TR/filter-effects-1/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-svg11">[SVG11]
   <dd>Erik Dahlström; et al. <a href="https://www.w3.org/TR/SVG11/">Scalable Vector Graphics (SVG) 1.1 (Second Edition)</a>. 16 August 2011. REC. URL: <a href="https://www.w3.org/TR/SVG11/">https://www.w3.org/TR/SVG11/</a>
   <dt id="biblio-svg2">[SVG2]
   <dd>Amelia Bellamy-Royds; et al. <a href="https://www.w3.org/TR/SVG2/">Scalable Vector Graphics (SVG) 2</a>. 4 October 2018. CR. URL: <a href="https://www.w3.org/TR/SVG2/">https://www.w3.org/TR/SVG2/</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-css3color">[CSS3COLOR]
   <dd>Tantek Çelik; Chris Lilley; David Baron. <a href="https://www.w3.org/TR/css-color-3/">CSS Color Module Level 3</a>. 19 June 2018. REC. URL: <a href="https://www.w3.org/TR/css-color-3/">https://www.w3.org/TR/css-color-3/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
  <div class="big-element-wrapper">
   <table class="index">
    <thead>
     <tr>
      <th scope="col">Name
      <th scope="col">Value
      <th scope="col">Initial
      <th scope="col">Applies to
      <th scope="col">Inh.
      <th scope="col">%ages
      <th scope="col">Animation discrete
      <th scope="col">Anim­ation type
      <th scope="col">Canonical order
      <th scope="col">Com­puted value
      <th scope="col">Media
    <tbody>
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-clip" id="ref-for-propdef-clip⑧">clip</a>
      <td>rect() | auto
      <td>auto
      <td>Absolutely positioned elements. In SVG, it applies to elements which establish a new viewport, pattern elements and mask elements.
      <td>no
      <td>n/a
      <td>
      <td>as rectangle
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-clip-path" id="ref-for-propdef-clip-path①⑧">clip-path</a>
      <td>&lt;clip-source> | [ &lt;basic-shape> || &lt;geometry-box> ] | none
      <td>none
      <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
      <td>no
      <td>n/a
      <td>
      <td>by computed value
      <td>per grammar
      <td>as specified, but with &lt;url> values made absolute
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-clip-rule" id="ref-for-propdef-clip-rule①①">clip-rule</a>
      <td>nonzero | evenodd
      <td>nonzero
      <td>Applies to SVG graphics elements
      <td>yes
      <td>n/a
      <td>
      <td>discrete
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask" id="ref-for-propdef-mask①⑤">mask</a>
      <td>&lt;mask-layer>#
      <td>see individual properties
      <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
      <td>no
      <td>see individual properties
      <td>
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-border" id="ref-for-propdef-mask-border⑨">mask-border</a>
      <td>&lt;'mask-border-source'> || &lt;'mask-border-slice'> [ / &lt;'mask-border-width'>? [ / &lt;'mask-border-outset'> ]? ]? || &lt;'mask-border-repeat'> || &lt;'mask-border-mode'>
      <td>See individual properties
      <td>See individual properties
      <td>no
      <td>n/a
      <td>
      <td>See individual properties
      <td>per grammar
      <td>See individual properties
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-border-mode" id="ref-for-propdef-mask-border-mode⑤">mask-border-mode</a>
      <td>luminance | alpha
      <td>alpha
      <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
      <td>no
      <td>n/a
      <td>discrete
      <td>discrete
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-border-outset" id="ref-for-propdef-mask-border-outset⑥">mask-border-outset</a>
      <td>[ &lt;length> | &lt;number> ]{1,4}
      <td>0
      <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
      <td>no
      <td>n/a
      <td>
      <td>discrete
      <td>per grammar
      <td>all &lt;length>s made absolute, otherwise as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-border-repeat" id="ref-for-propdef-mask-border-repeat④">mask-border-repeat</a>
      <td>[ stretch | repeat | round | space ]{1,2}
      <td>stretch
      <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
      <td>no
      <td>n/a
      <td>
      <td>discrete
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-border-slice" id="ref-for-propdef-mask-border-slice⑥">mask-border-slice</a>
      <td>&lt;number-percentage>{1,4} fill?
      <td>0
      <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
      <td>no
      <td>refer to size of the mask border image
      <td>
      <td>discrete
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source①⑦">mask-border-source</a>
      <td>none | &lt;image>
      <td>none
      <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
      <td>no
      <td>n/a
      <td>
      <td>discrete
      <td>per grammar
      <td>they keyword none or the computed &lt;image>
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-border-width" id="ref-for-propdef-mask-border-width⑤">mask-border-width</a>
      <td>[ &lt;length-percentage> | &lt;number> | auto ]{1,4}
      <td>auto
      <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
      <td>no
      <td>relative to width/height of the mask border image area
      <td>
      <td>discrete
      <td>per grammar
      <td>all &lt;length>s made absolute, otherwise as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip①②">mask-clip</a>
      <td>[ &lt;geometry-box> | no-clip ]#
      <td>border-box
      <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
      <td>no
      <td>n/a
      <td>
      <td>discrete
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-composite" id="ref-for-propdef-mask-composite⑦">mask-composite</a>
      <td>&lt;compositing-operator>#
      <td>add
      <td>All elements. In SVG, it applies to container elements without the defs element and all graphics elements
      <td>no
      <td>n/a
      <td>
      <td>discrete
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-image" id="ref-for-propdef-mask-image①⑨">mask-image</a>
      <td>&lt;mask-reference>#
      <td>none
      <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
      <td>no
      <td>n/a
      <td>
      <td>discrete
      <td>per grammar
      <td>the keyword none, a computed &lt;image>, or a computed &lt;url>
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode①⑤">mask-mode</a>
      <td>&lt;masking-mode>#
      <td>match-source
      <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
      <td>no
      <td>n/a
      <td>
      <td>discrete
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin①②">mask-origin</a>
      <td>&lt;geometry-box>#
      <td>border-box
      <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
      <td>no
      <td>n/a
      <td>
      <td>discrete
      <td>per grammar
      <td>as specified
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-position" id="ref-for-propdef-mask-position①①">mask-position</a>
      <td>&lt;position>#
      <td>0% 0%
      <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
      <td>no
      <td>refer to size of mask painting area minus size of mask layer image; see text background-position [CSS3BG]
      <td>
      <td>repeatable list
      <td>per grammar
      <td>Consisting of: two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a &lt;length>), otherwise as a percentage.
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-repeat" id="ref-for-propdef-mask-repeat⑦">mask-repeat</a>
      <td>&lt;repeat-style>#
      <td>repeat
      <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
      <td>no
      <td>n/a
      <td>
      <td>discrete
      <td>per grammar
      <td>Consists of: two keywords, one per dimension
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-size" id="ref-for-propdef-mask-size⑧">mask-size</a>
      <td>&lt;bg-size>#
      <td>auto
      <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
      <td>no
      <td>n/a
      <td>
      <td>repeatable list
      <td>per grammar
      <td>as specified, but with lengths made absolute
      <td>visual
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-type" id="ref-for-propdef-mask-type①①">mask-type</a>
      <td>luminance | alpha
      <td>luminance
      <td>mask elements
      <td>no
      <td>n/a
      <td>
      <td>discrete
      <td>per grammar
      <td>as specified
      <td>visual
   </table>
  </div>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="#svgclippathelement" id="ref-for-svgclippathelement①"><c- g>SVGClipPathElement</c-></a> : <a class="n" data-link-type="idl-name" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGElement" id="ref-for-InterfaceSVGElement②"><c- n>SVGElement</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedEnumeration" id="ref-for-InterfaceSVGAnimatedEnumeration⑥"><c- n>SVGAnimatedEnumeration</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedEnumeration" href="#dom-svgclippathelement-clippathunits" id="ref-for-dom-svgclippathelement-clippathunits①"><c- g>clipPathUnits</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://svgwg.org/svg2-draft/coords.html#InterfaceSVGAnimatedTransformList" id="ref-for-InterfaceSVGAnimatedTransformList②"><c- n>SVGAnimatedTransformList</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedTransformList" href="#dom-svgclippathelement-transform" id="ref-for-dom-svgclippathelement-transform①"><c- g>transform</c-></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="#svgmaskelement" id="ref-for-svgmaskelement①"><c- g>SVGMaskElement</c-></a> : <a class="n" data-link-type="idl-name" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGElement" id="ref-for-InterfaceSVGElement①①"><c- n>SVGElement</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedEnumeration" id="ref-for-InterfaceSVGAnimatedEnumeration②①"><c- n>SVGAnimatedEnumeration</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedEnumeration" href="#dom-svgmaskelement-maskunits" id="ref-for-dom-svgmaskelement-maskunits①"><c- g>maskUnits</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedEnumeration" id="ref-for-InterfaceSVGAnimatedEnumeration③①"><c- n>SVGAnimatedEnumeration</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedEnumeration" href="#dom-svgmaskelement-maskcontentunits" id="ref-for-dom-svgmaskelement-maskcontentunits①"><c- g>maskContentUnits</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedLength" id="ref-for-InterfaceSVGAnimatedLength⑧"><c- n>SVGAnimatedLength</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedLength" href="#dom-svgmaskelement-x" id="ref-for-dom-svgmaskelement-x①"><c- g>x</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedLength" id="ref-for-InterfaceSVGAnimatedLength①①"><c- n>SVGAnimatedLength</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedLength" href="#dom-svgmaskelement-y" id="ref-for-dom-svgmaskelement-y①"><c- g>y</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedLength" id="ref-for-InterfaceSVGAnimatedLength②①"><c- n>SVGAnimatedLength</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedLength" href="#dom-svgmaskelement-width" id="ref-for-dom-svgmaskelement-width①"><c- g>width</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedLength" id="ref-for-InterfaceSVGAnimatedLength③①"><c- n>SVGAnimatedLength</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedLength" href="#dom-svgmaskelement-height" id="ref-for-dom-svgmaskelement-height①"><c- g>height</c-></a>;
};

</pre>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> Firefox disables rendering of elements referencing clipPaths with violated content model. No browser ignores clipPath on use with indirect reference. <a href="https://github.com/w3c/fxtf-drafts/issues/17">&lt;https://github.com/w3c/fxtf-drafts/issues/17></a><a href="#issue-d0c561ed"> ↵ </a></div>
   <div class="issue"> Define raw geometry with regards to CSS properties that affect it. Especially on text. <a href="https://github.com/w3c/fxtf-drafts/issues/170">&lt;https://github.com/w3c/fxtf-drafts/issues/170></a><a href="#issue-1eaffdcc"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="clipping-path">
   <b><a href="#clipping-path">#clipping-path</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-clipping-path">5.1. Clipping Shape: the clip-path property</a> <a href="#ref-for-clipping-path①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="clipping-region">
   <b><a href="#clipping-region">#clipping-region</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-clipping-region">5. Clipping Paths</a>
    <li><a href="#ref-for-clipping-region①">6.2. Winding Rules: the clip-rule property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-clip-path">
   <b><a href="#propdef-clip-path">#propdef-clip-path</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-clip-path">1.1. Clipping</a>
    <li><a href="#ref-for-propdef-clip-path①">5. Clipping Paths</a> <a href="#ref-for-propdef-clip-path②">(2)</a>
    <li><a href="#ref-for-propdef-clip-path③">5.1. Clipping Shape: the clip-path property</a> <a href="#ref-for-propdef-clip-path④">(2)</a> <a href="#ref-for-propdef-clip-path⑤">(3)</a>
    <li><a href="#ref-for-propdef-clip-path⑥">6.1. The clipPath element</a> <a href="#ref-for-propdef-clip-path⑦">(2)</a> <a href="#ref-for-propdef-clip-path⑧">(3)</a> <a href="#ref-for-propdef-clip-path⑨">(4)</a> <a href="#ref-for-propdef-clip-path①⓪">(5)</a> <a href="#ref-for-propdef-clip-path①①">(6)</a> <a href="#ref-for-propdef-clip-path①②">(7)</a> <a href="#ref-for-propdef-clip-path①③">(8)</a> <a href="#ref-for-propdef-clip-path①④">(9)</a>
    <li><a href="#ref-for-propdef-clip-path①⑤">9.1. The mask element</a>
    <li><a href="#ref-for-propdef-clip-path①⑥">10. Privacy and Security Considerations</a>
    <li><a href="#ref-for-propdef-clip-path①⑦">Appendix A: The deprecated clip property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-clip-source">
   <b><a href="#typedef-clip-source">#typedef-clip-source</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-clip-source">5.1. Clipping Shape: the clip-path property</a>
    <li><a href="#ref-for-typedef-clip-source①">10. Privacy and Security Considerations</a> <a href="#ref-for-typedef-clip-source②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-geometry-box">
   <b><a href="#typedef-geometry-box">#typedef-geometry-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-geometry-box">5.1. Clipping Shape: the clip-path property</a> <a href="#ref-for-typedef-geometry-box①">(2)</a>
    <li><a href="#ref-for-typedef-geometry-box②">7.5. Masking Area: the mask-clip property</a>
    <li><a href="#ref-for-typedef-geometry-box③">7.6. Positioning Area: the mask-origin property</a>
    <li><a href="#ref-for-typedef-geometry-box④">7.9. Mask Shorthand: the mask property</a> <a href="#ref-for-typedef-geometry-box⑤">(2)</a> <a href="#ref-for-typedef-geometry-box⑥">(3)</a> <a href="#ref-for-typedef-geometry-box⑦">(4)</a> <a href="#ref-for-typedef-geometry-box⑧">(5)</a> <a href="#ref-for-typedef-geometry-box⑨">(6)</a> <a href="#ref-for-typedef-geometry-box①⓪">(7)</a>
    <li><a href="#ref-for-typedef-geometry-box①①">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-clip-path-fill-box">
   <b><a href="#valdef-clip-path-fill-box">#valdef-clip-path-fill-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-clip-path-fill-box">5.1. Clipping Shape: the clip-path property</a> <a href="#ref-for-valdef-clip-path-fill-box①">(2)</a>
    <li><a href="#ref-for-valdef-clip-path-fill-box②">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-clip-path-stroke-box">
   <b><a href="#valdef-clip-path-stroke-box">#valdef-clip-path-stroke-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-clip-path-stroke-box">5.1. Clipping Shape: the clip-path property</a> <a href="#ref-for-valdef-clip-path-stroke-box①">(2)</a>
    <li><a href="#ref-for-valdef-clip-path-stroke-box②">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-clip-path-view-box">
   <b><a href="#valdef-clip-path-view-box">#valdef-clip-path-view-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-clip-path-view-box">5.1. Clipping Shape: the clip-path property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="elementdef-clippath">
   <b><a href="#elementdef-clippath">#elementdef-clippath</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-clippath">1.1. Clipping</a>
    <li><a href="#ref-for-elementdef-clippath①">5. Clipping Paths</a>
    <li><a href="#ref-for-elementdef-clippath②">5.1. Clipping Shape: the clip-path property</a> <a href="#ref-for-elementdef-clippath③">(2)</a> <a href="#ref-for-elementdef-clippath④">(3)</a>
    <li><a href="#ref-for-elementdef-clippath⑤">6.1. The clipPath element</a> <a href="#ref-for-elementdef-clippath⑥">(2)</a> <a href="#ref-for-elementdef-clippath⑦">(3)</a> <a href="#ref-for-elementdef-clippath⑧">(4)</a> <a href="#ref-for-elementdef-clippath⑨">(5)</a> <a href="#ref-for-elementdef-clippath①⓪">(6)</a> <a href="#ref-for-elementdef-clippath①①">(7)</a> <a href="#ref-for-elementdef-clippath①②">(8)</a> <a href="#ref-for-elementdef-clippath①③">(9)</a> <a href="#ref-for-elementdef-clippath①④">(10)</a> <a href="#ref-for-elementdef-clippath①⑤">(11)</a> <a href="#ref-for-elementdef-clippath①⑥">(12)</a> <a href="#ref-for-elementdef-clippath①⑦">(13)</a> <a href="#ref-for-elementdef-clippath①⑧">(14)</a> <a href="#ref-for-elementdef-clippath①⑨">(15)</a> <a href="#ref-for-elementdef-clippath②⓪">(16)</a> <a href="#ref-for-elementdef-clippath②①">(17)</a> <a href="#ref-for-elementdef-clippath②②">(18)</a> <a href="#ref-for-elementdef-clippath②③">(19)</a> <a href="#ref-for-elementdef-clippath②④">(20)</a> <a href="#ref-for-elementdef-clippath②⑤">(21)</a> <a href="#ref-for-elementdef-clippath②⑥">(22)</a> <a href="#ref-for-elementdef-clippath②⑦">(23)</a> <a href="#ref-for-elementdef-clippath②⑧">(24)</a>
    <li><a href="#ref-for-elementdef-clippath②⑨">6.2. Winding Rules: the clip-rule property</a>
    <li><a href="#ref-for-elementdef-clippath③⓪">9.1. The mask element</a>
    <li><a href="#ref-for-elementdef-clippath③①">Interface SVGClipPathElement</a> <a href="#ref-for-elementdef-clippath③②">(2)</a>
    <li><a href="#ref-for-elementdef-clippath③③">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-clippath-clippathunits">
   <b><a href="#element-attrdef-clippath-clippathunits">#element-attrdef-clippath-clippathunits</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-clippath-clippathunits">6.1. The clipPath element</a> <a href="#ref-for-element-attrdef-clippath-clippathunits①">(2)</a>
    <li><a href="#ref-for-element-attrdef-clippath-clippathunits②">Interface SVGClipPathElement</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-clippathunits-userspaceonuse">
   <b><a href="#valdef-clippathunits-userspaceonuse">#valdef-clippathunits-userspaceonuse</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-clippathunits-userspaceonuse">6.1. The clipPath element</a> <a href="#ref-for-valdef-clippathunits-userspaceonuse①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-clippathunits-objectboundingbox">
   <b><a href="#valdef-clippathunits-objectboundingbox">#valdef-clippathunits-objectboundingbox</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-clippathunits-objectboundingbox">6.1. The clipPath element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-clip-rule">
   <b><a href="#propdef-clip-rule">#propdef-clip-rule</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-clip-rule">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-clip-rule①">6.2. Winding Rules: the clip-rule property</a> <a href="#ref-for-propdef-clip-rule②">(2)</a> <a href="#ref-for-propdef-clip-rule③">(3)</a> <a href="#ref-for-propdef-clip-rule④">(4)</a> <a href="#ref-for-propdef-clip-rule⑤">(5)</a> <a href="#ref-for-propdef-clip-rule⑥">(6)</a> <a href="#ref-for-propdef-clip-rule⑦">(7)</a> <a href="#ref-for-propdef-clip-rule⑧">(8)</a>
    <li><a href="#ref-for-propdef-clip-rule⑨">9.1. The mask element</a>
    <li><a href="#ref-for-propdef-clip-rule①⓪">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-clip-rule-nonzero">
   <b><a href="#valdef-clip-rule-nonzero">#valdef-clip-rule-nonzero</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-clip-rule-nonzero">6.2. Winding Rules: the clip-rule property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-clip-rule-evenodd">
   <b><a href="#valdef-clip-rule-evenodd">#valdef-clip-rule-evenodd</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-clip-rule-evenodd">6.2. Winding Rules: the clip-rule property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-mask-image">
   <b><a href="#propdef-mask-image">#propdef-mask-image</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-mask-image">1.2. Masking</a> <a href="#ref-for-propdef-mask-image①">(2)</a> <a href="#ref-for-propdef-mask-image②">(3)</a> <a href="#ref-for-propdef-mask-image③">(4)</a>
    <li><a href="#ref-for-propdef-mask-image④">7.1. Mask Image Source: the mask-image property</a> <a href="#ref-for-propdef-mask-image⑤">(2)</a> <a href="#ref-for-propdef-mask-image⑥">(3)</a>
    <li><a href="#ref-for-propdef-mask-image⑦">7.2. Mask Image Interpretation: the mask-mode property</a> <a href="#ref-for-propdef-mask-image⑧">(2)</a> <a href="#ref-for-propdef-mask-image⑨">(3)</a>
    <li><a href="#ref-for-propdef-mask-image①⓪">7.8. Compositing mask layers: the mask-composite property</a>
    <li><a href="#ref-for-propdef-mask-image①①">7.10. The Mask Image Rendering Model</a> <a href="#ref-for-propdef-mask-image①②">(2)</a>
    <li><a href="#ref-for-propdef-mask-image①③">7.10.2. Layering Multiple Mask Images</a>
    <li><a href="#ref-for-propdef-mask-image①④">8.1. Mask Border Image Source: the mask-border-source property</a> <a href="#ref-for-propdef-mask-image①⑤">(2)</a>
    <li><a href="#ref-for-propdef-mask-image①⑥">10. Privacy and Security Considerations</a>
    <li><a href="#ref-for-propdef-mask-image①⑦">Changes since last publication</a> <a href="#ref-for-propdef-mask-image①⑧">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="mask-layer-image">
   <b><a href="#mask-layer-image">#mask-layer-image</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mask-layer-image">4. Terminology</a>
    <li><a href="#ref-for-mask-layer-image①">7.1. Mask Image Source: the mask-image property</a>
    <li><a href="#ref-for-mask-layer-image②">7.2. Mask Image Interpretation: the mask-mode property</a> <a href="#ref-for-mask-layer-image③">(2)</a> <a href="#ref-for-mask-layer-image④">(3)</a>
    <li><a href="#ref-for-mask-layer-image⑤">7.3. Tiling Mask Images: the mask-repeat property</a> <a href="#ref-for-mask-layer-image⑥">(2)</a> <a href="#ref-for-mask-layer-image⑦">(3)</a>
    <li><a href="#ref-for-mask-layer-image⑧">7.4. Positioning Mask Images: the mask-position property</a>
    <li><a href="#ref-for-mask-layer-image⑨">7.5. Masking Area: the mask-clip property</a> <a href="#ref-for-mask-layer-image①⓪">(2)</a>
    <li><a href="#ref-for-mask-layer-image①①">7.6. Positioning Area: the mask-origin property</a>
    <li><a href="#ref-for-mask-layer-image①②">7.7. Sizing Mask Images: the mask-size property</a>
    <li><a href="#ref-for-mask-layer-image①③">7.8. Compositing mask layers: the mask-composite property</a> <a href="#ref-for-mask-layer-image①④">(2)</a>
    <li><a href="#ref-for-mask-layer-image①⑤">7.9. Mask Shorthand: the mask property</a>
    <li><a href="#ref-for-mask-layer-image①⑥">7.10.1. Mask processing</a>
    <li><a href="#ref-for-mask-layer-image①⑦">7.10.2. Layering Multiple Mask Images</a>
    <li><a href="#ref-for-mask-layer-image①⑧">9.2. Mask Source Interpretation: the mask-type property</a>
    <li><a href="#ref-for-mask-layer-image①⑨">Changes since last publication</a> <a href="#ref-for-mask-layer-image②⓪">(2)</a> <a href="#ref-for-mask-layer-image②①">(3)</a> <a href="#ref-for-mask-layer-image②②">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-mask-reference">
   <b><a href="#typedef-mask-reference">#typedef-mask-reference</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-mask-reference">7.1. Mask Image Source: the mask-image property</a> <a href="#ref-for-typedef-mask-reference①">(2)</a> <a href="#ref-for-typedef-mask-reference②">(3)</a>
    <li><a href="#ref-for-typedef-mask-reference③">7.2. Mask Image Interpretation: the mask-mode property</a> <a href="#ref-for-typedef-mask-reference④">(2)</a> <a href="#ref-for-typedef-mask-reference⑤">(3)</a>
    <li><a href="#ref-for-typedef-mask-reference⑥">7.9. Mask Shorthand: the mask property</a> <a href="#ref-for-typedef-mask-reference⑦">(2)</a>
    <li><a href="#ref-for-typedef-mask-reference⑧">7.10.2. Layering Multiple Mask Images</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-mask-source">
   <b><a href="#typedef-mask-source">#typedef-mask-source</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-mask-source">7.1. Mask Image Source: the mask-image property</a> <a href="#ref-for-typedef-mask-source①">(2)</a> <a href="#ref-for-typedef-mask-source②">(3)</a>
    <li><a href="#ref-for-typedef-mask-source③">7.2. Mask Image Interpretation: the mask-mode property</a>
    <li><a href="#ref-for-typedef-mask-source④">10. Privacy and Security Considerations</a> <a href="#ref-for-typedef-mask-source⑤">(2)</a>
    <li><a href="#ref-for-typedef-mask-source⑥">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-mask-mode">
   <b><a href="#propdef-mask-mode">#propdef-mask-mode</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-mask-mode">7.2. Mask Image Interpretation: the mask-mode property</a> <a href="#ref-for-propdef-mask-mode①">(2)</a> <a href="#ref-for-propdef-mask-mode②">(3)</a> <a href="#ref-for-propdef-mask-mode③">(4)</a> <a href="#ref-for-propdef-mask-mode④">(5)</a> <a href="#ref-for-propdef-mask-mode⑤">(6)</a>
    <li><a href="#ref-for-propdef-mask-mode⑥">7.10.2. Layering Multiple Mask Images</a>
    <li><a href="#ref-for-propdef-mask-mode⑦">8.2. Mask Border Image Interpretation: the mask-border-mode property</a>
    <li><a href="#ref-for-propdef-mask-mode⑧">9.2. Mask Source Interpretation: the mask-type property</a> <a href="#ref-for-propdef-mask-mode⑨">(2)</a> <a href="#ref-for-propdef-mask-mode①⓪">(3)</a>
    <li><a href="#ref-for-propdef-mask-mode①①">Changes since last publication</a> <a href="#ref-for-propdef-mask-mode①②">(2)</a> <a href="#ref-for-propdef-mask-mode①③">(3)</a> <a href="#ref-for-propdef-mask-mode①④">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-masking-mode">
   <b><a href="#typedef-masking-mode">#typedef-masking-mode</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-masking-mode">7.2. Mask Image Interpretation: the mask-mode property</a>
    <li><a href="#ref-for-typedef-masking-mode①">7.9. Mask Shorthand: the mask property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-mask-mode-alpha">
   <b><a href="#valdef-mask-mode-alpha">#valdef-mask-mode-alpha</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-mode-alpha">7.2. Mask Image Interpretation: the mask-mode property</a>
    <li><a href="#ref-for-valdef-mask-mode-alpha①">9.2. Mask Source Interpretation: the mask-type property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-mask-mode-luminance">
   <b><a href="#valdef-mask-mode-luminance">#valdef-mask-mode-luminance</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-mode-luminance">7.2. Mask Image Interpretation: the mask-mode property</a> <a href="#ref-for-valdef-mask-mode-luminance①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-mask-mode-match-source">
   <b><a href="#valdef-mask-mode-match-source">#valdef-mask-mode-match-source</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-mode-match-source">9.2. Mask Source Interpretation: the mask-type property</a> <a href="#ref-for-valdef-mask-mode-match-source①">(2)</a>
    <li><a href="#ref-for-valdef-mask-mode-match-source②">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-mask-repeat">
   <b><a href="#propdef-mask-repeat">#propdef-mask-repeat</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-mask-repeat">7.3. Tiling Mask Images: the mask-repeat property</a> <a href="#ref-for-propdef-mask-repeat①">(2)</a>
    <li><a href="#ref-for-propdef-mask-repeat②">7.9. Mask Shorthand: the mask property</a>
    <li><a href="#ref-for-propdef-mask-repeat③">Changes since last publication</a> <a href="#ref-for-propdef-mask-repeat④">(2)</a> <a href="#ref-for-propdef-mask-repeat⑤">(3)</a> <a href="#ref-for-propdef-mask-repeat⑥">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-mask-position">
   <b><a href="#propdef-mask-position">#propdef-mask-position</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-mask-position">1.2. Masking</a>
    <li><a href="#ref-for-propdef-mask-position①">7.4. Positioning Mask Images: the mask-position property</a> <a href="#ref-for-propdef-mask-position②">(2)</a>
    <li><a href="#ref-for-propdef-mask-position③">7.6. Positioning Area: the mask-origin property</a>
    <li><a href="#ref-for-propdef-mask-position④">7.9. Mask Shorthand: the mask property</a>
    <li><a href="#ref-for-propdef-mask-position⑤">Changes since last publication</a> <a href="#ref-for-propdef-mask-position⑥">(2)</a> <a href="#ref-for-propdef-mask-position⑦">(3)</a> <a href="#ref-for-propdef-mask-position⑧">(4)</a> <a href="#ref-for-propdef-mask-position⑨">(5)</a> <a href="#ref-for-propdef-mask-position①⓪">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-mask-clip">
   <b><a href="#propdef-mask-clip">#propdef-mask-clip</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-mask-clip">7.5. Masking Area: the mask-clip property</a> <a href="#ref-for-propdef-mask-clip①">(2)</a> <a href="#ref-for-propdef-mask-clip②">(3)</a> <a href="#ref-for-propdef-mask-clip③">(4)</a>
    <li><a href="#ref-for-propdef-mask-clip④">7.6. Positioning Area: the mask-origin property</a>
    <li><a href="#ref-for-propdef-mask-clip⑤">7.9. Mask Shorthand: the mask property</a> <a href="#ref-for-propdef-mask-clip⑥">(2)</a> <a href="#ref-for-propdef-mask-clip⑦">(3)</a> <a href="#ref-for-propdef-mask-clip⑧">(4)</a>
    <li><a href="#ref-for-propdef-mask-clip⑨">Changes since last publication</a> <a href="#ref-for-propdef-mask-clip①⓪">(2)</a> <a href="#ref-for-propdef-mask-clip①①">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="mask-painting-area">
   <b><a href="#mask-painting-area">#mask-painting-area</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mask-painting-area">4. Terminology</a>
    <li><a href="#ref-for-mask-painting-area①">7.3. Tiling Mask Images: the mask-repeat property</a>
    <li><a href="#ref-for-mask-painting-area②">7.4. Positioning Mask Images: the mask-position property</a>
    <li><a href="#ref-for-mask-painting-area③">7.5. Masking Area: the mask-clip property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-mask-clip-content-box">
   <b><a href="#valdef-mask-clip-content-box">#valdef-mask-clip-content-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-clip-content-box">5.1. Clipping Shape: the clip-path property</a> <a href="#ref-for-valdef-mask-clip-content-box①">(2)</a>
    <li><a href="#ref-for-valdef-mask-clip-content-box②">7.5. Masking Area: the mask-clip property</a> <a href="#ref-for-valdef-mask-clip-content-box③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-mask-clip-padding-box">
   <b><a href="#valdef-mask-clip-padding-box">#valdef-mask-clip-padding-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-clip-padding-box">5.1. Clipping Shape: the clip-path property</a>
    <li><a href="#ref-for-valdef-mask-clip-padding-box①">7.5. Masking Area: the mask-clip property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-mask-clip-border-box">
   <b><a href="#valdef-mask-clip-border-box">#valdef-mask-clip-border-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-clip-border-box">5.1. Clipping Shape: the clip-path property</a> <a href="#ref-for-valdef-mask-clip-border-box①">(2)</a> <a href="#ref-for-valdef-mask-clip-border-box②">(3)</a>
    <li><a href="#ref-for-valdef-mask-clip-border-box③">7.5. Masking Area: the mask-clip property</a> <a href="#ref-for-valdef-mask-clip-border-box④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-mask-clip-fill-box">
   <b><a href="#valdef-mask-clip-fill-box">#valdef-mask-clip-fill-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-clip-fill-box">7.5. Masking Area: the mask-clip property</a> <a href="#ref-for-valdef-mask-clip-fill-box①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-mask-clip-stroke-box">
   <b><a href="#valdef-mask-clip-stroke-box">#valdef-mask-clip-stroke-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-clip-stroke-box">7.5. Masking Area: the mask-clip property</a> <a href="#ref-for-valdef-mask-clip-stroke-box①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-mask-clip-view-box">
   <b><a href="#valdef-mask-clip-view-box">#valdef-mask-clip-view-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-clip-view-box">7.5. Masking Area: the mask-clip property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-mask-clip-no-clip">
   <b><a href="#valdef-mask-clip-no-clip">#valdef-mask-clip-no-clip</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-clip-no-clip">7.9. Mask Shorthand: the mask property</a> <a href="#ref-for-valdef-mask-clip-no-clip①">(2)</a> <a href="#ref-for-valdef-mask-clip-no-clip②">(3)</a>
    <li><a href="#ref-for-valdef-mask-clip-no-clip③">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-mask-origin">
   <b><a href="#propdef-mask-origin">#propdef-mask-origin</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-mask-origin">7.6. Positioning Area: the mask-origin property</a> <a href="#ref-for-propdef-mask-origin①">(2)</a> <a href="#ref-for-propdef-mask-origin②">(3)</a> <a href="#ref-for-propdef-mask-origin③">(4)</a> <a href="#ref-for-propdef-mask-origin④">(5)</a>
    <li><a href="#ref-for-propdef-mask-origin⑤">7.9. Mask Shorthand: the mask property</a> <a href="#ref-for-propdef-mask-origin⑥">(2)</a> <a href="#ref-for-propdef-mask-origin⑦">(3)</a> <a href="#ref-for-propdef-mask-origin⑧">(4)</a>
    <li><a href="#ref-for-propdef-mask-origin⑨">Changes since last publication</a> <a href="#ref-for-propdef-mask-origin①⓪">(2)</a> <a href="#ref-for-propdef-mask-origin①①">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="mask-positioning-area">
   <b><a href="#mask-positioning-area">#mask-positioning-area</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mask-positioning-area">4. Terminology</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-mask-origin-content-box">
   <b><a href="#valdef-mask-origin-content-box">#valdef-mask-origin-content-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-origin-content-box">7.6. Positioning Area: the mask-origin property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-mask-origin-padding-box">
   <b><a href="#valdef-mask-origin-padding-box">#valdef-mask-origin-padding-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-origin-padding-box">7.6. Positioning Area: the mask-origin property</a> <a href="#ref-for-valdef-mask-origin-padding-box①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-mask-origin-border-box">
   <b><a href="#valdef-mask-origin-border-box">#valdef-mask-origin-border-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-origin-border-box">7.6. Positioning Area: the mask-origin property</a> <a href="#ref-for-valdef-mask-origin-border-box①">(2)</a>
    <li><a href="#ref-for-valdef-mask-origin-border-box②">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-mask-origin-fill-box">
   <b><a href="#valdef-mask-origin-fill-box">#valdef-mask-origin-fill-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-origin-fill-box">7.6. Positioning Area: the mask-origin property</a> <a href="#ref-for-valdef-mask-origin-fill-box①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-mask-origin-stroke-box">
   <b><a href="#valdef-mask-origin-stroke-box">#valdef-mask-origin-stroke-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-origin-stroke-box">7.6. Positioning Area: the mask-origin property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-mask-origin-view-box">
   <b><a href="#valdef-mask-origin-view-box">#valdef-mask-origin-view-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-origin-view-box">7.6. Positioning Area: the mask-origin property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-mask-size">
   <b><a href="#propdef-mask-size">#propdef-mask-size</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-mask-size">1.2. Masking</a>
    <li><a href="#ref-for-propdef-mask-size①">7.7. Sizing Mask Images: the mask-size property</a> <a href="#ref-for-propdef-mask-size②">(2)</a>
    <li><a href="#ref-for-propdef-mask-size③">7.9. Mask Shorthand: the mask property</a>
    <li><a href="#ref-for-propdef-mask-size④">Changes since last publication</a> <a href="#ref-for-propdef-mask-size⑤">(2)</a> <a href="#ref-for-propdef-mask-size⑥">(3)</a> <a href="#ref-for-propdef-mask-size⑦">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-mask-composite">
   <b><a href="#propdef-mask-composite">#propdef-mask-composite</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-mask-composite">7.1. Mask Image Source: the mask-image property</a>
    <li><a href="#ref-for-propdef-mask-composite①">7.8. Compositing mask layers: the mask-composite property</a> <a href="#ref-for-propdef-mask-composite②">(2)</a> <a href="#ref-for-propdef-mask-composite③">(3)</a>
    <li><a href="#ref-for-propdef-mask-composite④">7.10.2. Layering Multiple Mask Images</a> <a href="#ref-for-propdef-mask-composite⑤">(2)</a>
    <li><a href="#ref-for-propdef-mask-composite⑥">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-compositing-operator">
   <b><a href="#typedef-compositing-operator">#typedef-compositing-operator</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-compositing-operator">7.8. Compositing mask layers: the mask-composite property</a>
    <li><a href="#ref-for-typedef-compositing-operator①">7.9. Mask Shorthand: the mask property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="source">
   <b><a href="#source">#source</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-source">7.8. Compositing mask layers: the mask-composite property</a> <a href="#ref-for-source①">(2)</a> <a href="#ref-for-source②">(3)</a> <a href="#ref-for-source③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="destination">
   <b><a href="#destination">#destination</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-destination">7.8. Compositing mask layers: the mask-composite property</a> <a href="#ref-for-destination①">(2)</a> <a href="#ref-for-destination②">(3)</a> <a href="#ref-for-destination③">(4)</a> <a href="#ref-for-destination④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-mask-composite-add">
   <b><a href="#valdef-mask-composite-add">#valdef-mask-composite-add</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-composite-add">7.8. Compositing mask layers: the mask-composite property</a> <a href="#ref-for-valdef-mask-composite-add①">(2)</a>
    <li><a href="#ref-for-valdef-mask-composite-add②">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-mask-composite-subtract">
   <b><a href="#valdef-mask-composite-subtract">#valdef-mask-composite-subtract</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-composite-subtract">7.8. Compositing mask layers: the mask-composite property</a>
    <li><a href="#ref-for-valdef-mask-composite-subtract①">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-mask-composite-intersect">
   <b><a href="#valdef-mask-composite-intersect">#valdef-mask-composite-intersect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-composite-intersect">7.8. Compositing mask layers: the mask-composite property</a>
    <li><a href="#ref-for-valdef-mask-composite-intersect①">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-mask-composite-exclude">
   <b><a href="#valdef-mask-composite-exclude">#valdef-mask-composite-exclude</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-composite-exclude">7.8. Compositing mask layers: the mask-composite property</a> <a href="#ref-for-valdef-mask-composite-exclude①">(2)</a> <a href="#ref-for-valdef-mask-composite-exclude②">(3)</a>
    <li><a href="#ref-for-valdef-mask-composite-exclude③">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-mask">
   <b><a href="#propdef-mask">#propdef-mask</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-mask">1.2. Masking</a>
    <li><a href="#ref-for-propdef-mask①">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-mask②">7.9. Mask Shorthand: the mask property</a> <a href="#ref-for-propdef-mask③">(2)</a> <a href="#ref-for-propdef-mask④">(3)</a>
    <li><a href="#ref-for-propdef-mask⑤">7.10. The Mask Image Rendering Model</a>
    <li><a href="#ref-for-propdef-mask⑥">8.7. Mask Border Image Shorthand: the mask-border property</a>
    <li><a href="#ref-for-propdef-mask⑦">9.1. The mask element</a> <a href="#ref-for-propdef-mask⑧">(2)</a> <a href="#ref-for-propdef-mask⑨">(3)</a> <a href="#ref-for-propdef-mask①⓪">(4)</a>
    <li><a href="#ref-for-propdef-mask①①">Changes since last publication</a> <a href="#ref-for-propdef-mask①②">(2)</a> <a href="#ref-for-propdef-mask①③">(3)</a> <a href="#ref-for-propdef-mask①④">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-mask-layer">
   <b><a href="#typedef-mask-layer">#typedef-mask-layer</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-mask-layer">7.9. Mask Shorthand: the mask property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="mask-image">
   <b><a href="#mask-image">#mask-image</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mask-image">7.10.1. Mask processing</a> <a href="#ref-for-mask-image①">(2)</a> <a href="#ref-for-mask-image②">(3)</a> <a href="#ref-for-mask-image③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-mask-border-source">
   <b><a href="#propdef-mask-border-source">#propdef-mask-border-source</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-mask-border-source">1.2. Masking</a> <a href="#ref-for-propdef-mask-border-source①">(2)</a> <a href="#ref-for-propdef-mask-border-source②">(3)</a>
    <li><a href="#ref-for-propdef-mask-border-source③">7.1. Mask Image Source: the mask-image property</a> <a href="#ref-for-propdef-mask-border-source④">(2)</a>
    <li><a href="#ref-for-propdef-mask-border-source⑤">7.2. Mask Image Interpretation: the mask-mode property</a>
    <li><a href="#ref-for-propdef-mask-border-source⑥">8.1. Mask Border Image Source: the mask-border-source property</a> <a href="#ref-for-propdef-mask-border-source⑦">(2)</a> <a href="#ref-for-propdef-mask-border-source⑧">(3)</a>
    <li><a href="#ref-for-propdef-mask-border-source⑨">8.2. Mask Border Image Interpretation: the mask-border-mode property</a>
    <li><a href="#ref-for-propdef-mask-border-source①⓪">8.7. Mask Border Image Shorthand: the mask-border property</a> <a href="#ref-for-propdef-mask-border-source①①">(2)</a> <a href="#ref-for-propdef-mask-border-source①②">(3)</a>
    <li><a href="#ref-for-propdef-mask-border-source①③">8.8. Masking with the mask border image</a> <a href="#ref-for-propdef-mask-border-source①④">(2)</a> <a href="#ref-for-propdef-mask-border-source①⑤">(3)</a>
    <li><a href="#ref-for-propdef-mask-border-source①⑥">10. Privacy and Security Considerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="mask-border-image">
   <b><a href="#mask-border-image">#mask-border-image</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mask-border-image">4. Terminology</a>
    <li><a href="#ref-for-mask-border-image①">7.10.1. Mask processing</a>
    <li><a href="#ref-for-mask-border-image②">8. Border-Box Mask</a> <a href="#ref-for-mask-border-image③">(2)</a>
    <li><a href="#ref-for-mask-border-image④">8.1. Mask Border Image Source: the mask-border-source property</a> <a href="#ref-for-mask-border-image⑤">(2)</a>
    <li><a href="#ref-for-mask-border-image⑥">8.2. Mask Border Image Interpretation: the mask-border-mode property</a> <a href="#ref-for-mask-border-image⑦">(2)</a> <a href="#ref-for-mask-border-image⑧">(3)</a>
    <li><a href="#ref-for-mask-border-image⑨">8.3. Mask Border Image Slicing: the mask-border-slice property</a> <a href="#ref-for-mask-border-image①⓪">(2)</a>
    <li><a href="#ref-for-mask-border-image①①">8.4. Masking Areas: the mask-border-width property</a>
    <li><a href="#ref-for-mask-border-image①②">8.6. Mask Border Image Tiling: the mask-border-repeat property</a> <a href="#ref-for-mask-border-image①③">(2)</a>
    <li><a href="#ref-for-mask-border-image①④">8.8. Masking with the mask border image</a> <a href="#ref-for-mask-border-image①⑤">(2)</a>
    <li><a href="#ref-for-mask-border-image①⑥">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-mask-border-mode">
   <b><a href="#propdef-mask-border-mode">#propdef-mask-border-mode</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-mask-border-mode">8.2. Mask Border Image Interpretation: the mask-border-mode property</a> <a href="#ref-for-propdef-mask-border-mode①">(2)</a>
    <li><a href="#ref-for-propdef-mask-border-mode②">8.7. Mask Border Image Shorthand: the mask-border property</a> <a href="#ref-for-propdef-mask-border-mode③">(2)</a> <a href="#ref-for-propdef-mask-border-mode④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-mask-border-mode-alpha">
   <b><a href="#valdef-mask-border-mode-alpha">#valdef-mask-border-mode-alpha</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-border-mode-alpha">8.2. Mask Border Image Interpretation: the mask-border-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-mask-border-mode-luminance">
   <b><a href="#valdef-mask-border-mode-luminance">#valdef-mask-border-mode-luminance</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-border-mode-luminance">8.2. Mask Border Image Interpretation: the mask-border-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-mask-border-slice">
   <b><a href="#propdef-mask-border-slice">#propdef-mask-border-slice</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-mask-border-slice">8.3. Mask Border Image Slicing: the mask-border-slice property</a>
    <li><a href="#ref-for-propdef-mask-border-slice①">8.7. Mask Border Image Shorthand: the mask-border property</a> <a href="#ref-for-propdef-mask-border-slice②">(2)</a> <a href="#ref-for-propdef-mask-border-slice③">(3)</a>
    <li><a href="#ref-for-propdef-mask-border-slice④">8.8. Masking with the mask border image</a>
    <li><a href="#ref-for-propdef-mask-border-slice⑤">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-mask-border-slice-fill">
   <b><a href="#valdef-mask-border-slice-fill">#valdef-mask-border-slice-fill</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-border-slice-fill">Changes since last publication</a> <a href="#ref-for-valdef-mask-border-slice-fill①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-mask-border-width">
   <b><a href="#propdef-mask-border-width">#propdef-mask-border-width</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-mask-border-width">8.4. Masking Areas: the mask-border-width property</a>
    <li><a href="#ref-for-propdef-mask-border-width①">8.5. Edge Overhang: the mask-border-outset property</a>
    <li><a href="#ref-for-propdef-mask-border-width②">8.7. Mask Border Image Shorthand: the mask-border property</a> <a href="#ref-for-propdef-mask-border-width③">(2)</a> <a href="#ref-for-propdef-mask-border-width④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="mask-border-image-area">
   <b><a href="#mask-border-image-area">#mask-border-image-area</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mask-border-image-area">1.2. Masking</a>
    <li><a href="#ref-for-mask-border-image-area①">4. Terminology</a>
    <li><a href="#ref-for-mask-border-image-area②">8. Border-Box Mask</a>
    <li><a href="#ref-for-mask-border-image-area③">8.4. Masking Areas: the mask-border-width property</a>
    <li><a href="#ref-for-mask-border-image-area④">8.5. Edge Overhang: the mask-border-outset property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-mask-border-outset">
   <b><a href="#propdef-mask-border-outset">#propdef-mask-border-outset</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-mask-border-outset">8.4. Masking Areas: the mask-border-width property</a>
    <li><a href="#ref-for-propdef-mask-border-outset①">8.5. Edge Overhang: the mask-border-outset property</a> <a href="#ref-for-propdef-mask-border-outset②">(2)</a>
    <li><a href="#ref-for-propdef-mask-border-outset③">8.7. Mask Border Image Shorthand: the mask-border property</a> <a href="#ref-for-propdef-mask-border-outset④">(2)</a> <a href="#ref-for-propdef-mask-border-outset⑤">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-mask-border-repeat">
   <b><a href="#propdef-mask-border-repeat">#propdef-mask-border-repeat</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-mask-border-repeat">8.6. Mask Border Image Tiling: the mask-border-repeat property</a>
    <li><a href="#ref-for-propdef-mask-border-repeat①">8.7. Mask Border Image Shorthand: the mask-border property</a> <a href="#ref-for-propdef-mask-border-repeat②">(2)</a> <a href="#ref-for-propdef-mask-border-repeat③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-mask-border">
   <b><a href="#propdef-mask-border">#propdef-mask-border</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-mask-border">1.2. Masking</a> <a href="#ref-for-propdef-mask-border①">(2)</a>
    <li><a href="#ref-for-propdef-mask-border②">7.9. Mask Shorthand: the mask property</a> <a href="#ref-for-propdef-mask-border③">(2)</a>
    <li><a href="#ref-for-propdef-mask-border④">8. Border-Box Mask</a> <a href="#ref-for-propdef-mask-border⑤">(2)</a> <a href="#ref-for-propdef-mask-border⑥">(3)</a>
    <li><a href="#ref-for-propdef-mask-border⑦">8.7. Mask Border Image Shorthand: the mask-border property</a> <a href="#ref-for-propdef-mask-border⑧">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="elementdef-mask">
   <b><a href="#elementdef-mask">#elementdef-mask</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-mask">1.2. Masking</a> <a href="#ref-for-elementdef-mask①">(2)</a> <a href="#ref-for-elementdef-mask②">(3)</a>
    <li><a href="#ref-for-elementdef-mask③">7.1. Mask Image Source: the mask-image property</a> <a href="#ref-for-elementdef-mask④">(2)</a>
    <li><a href="#ref-for-elementdef-mask⑤">7.2. Mask Image Interpretation: the mask-mode property</a> <a href="#ref-for-elementdef-mask⑥">(2)</a> <a href="#ref-for-elementdef-mask⑦">(3)</a>
    <li><a href="#ref-for-elementdef-mask⑧">7.5. Masking Area: the mask-clip property</a> <a href="#ref-for-elementdef-mask⑨">(2)</a> <a href="#ref-for-elementdef-mask①⓪">(3)</a>
    <li><a href="#ref-for-elementdef-mask①①">7.9. Mask Shorthand: the mask property</a>
    <li><a href="#ref-for-elementdef-mask①②">7.10.1. Mask processing</a>
    <li><a href="#ref-for-elementdef-mask①③">9.1. The mask element</a> <a href="#ref-for-elementdef-mask①④">(2)</a> <a href="#ref-for-elementdef-mask①⑤">(3)</a> <a href="#ref-for-elementdef-mask①⑥">(4)</a> <a href="#ref-for-elementdef-mask①⑦">(5)</a> <a href="#ref-for-elementdef-mask①⑧">(6)</a> <a href="#ref-for-elementdef-mask①⑨">(7)</a> <a href="#ref-for-elementdef-mask②⓪">(8)</a> <a href="#ref-for-elementdef-mask②①">(9)</a> <a href="#ref-for-elementdef-mask②②">(10)</a> <a href="#ref-for-elementdef-mask②③">(11)</a> <a href="#ref-for-elementdef-mask②④">(12)</a> <a href="#ref-for-elementdef-mask②⑤">(13)</a> <a href="#ref-for-elementdef-mask②⑥">(14)</a> <a href="#ref-for-elementdef-mask②⑦">(15)</a>
    <li><a href="#ref-for-elementdef-mask②⑧">9.2. Mask Source Interpretation: the mask-type property</a> <a href="#ref-for-elementdef-mask②⑨">(2)</a> <a href="#ref-for-elementdef-mask③⓪">(3)</a> <a href="#ref-for-elementdef-mask③①">(4)</a> <a href="#ref-for-elementdef-mask③②">(5)</a>
    <li><a href="#ref-for-elementdef-mask③③">Appendix A: The deprecated clip property</a> <a href="#ref-for-elementdef-mask③④">(2)</a>
    <li><a href="#ref-for-elementdef-mask③⑤">Interface SVGMaskElement</a> <a href="#ref-for-elementdef-mask③⑥">(2)</a> <a href="#ref-for-elementdef-mask③⑦">(3)</a> <a href="#ref-for-elementdef-mask③⑧">(4)</a> <a href="#ref-for-elementdef-mask③⑨">(5)</a> <a href="#ref-for-elementdef-mask④⓪">(6)</a> <a href="#ref-for-elementdef-mask④①">(7)</a>
    <li><a href="#ref-for-elementdef-mask④②">Changes since last publication</a> <a href="#ref-for-elementdef-mask④③">(2)</a> <a href="#ref-for-elementdef-mask④④">(3)</a> <a href="#ref-for-elementdef-mask④⑤">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-mask-maskunits">
   <b><a href="#element-attrdef-mask-maskunits">#element-attrdef-mask-maskunits</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-mask-maskunits">7.5. Masking Area: the mask-clip property</a>
    <li><a href="#ref-for-element-attrdef-mask-maskunits①">9.1. The mask element</a> <a href="#ref-for-element-attrdef-mask-maskunits②">(2)</a>
    <li><a href="#ref-for-element-attrdef-mask-maskunits③">Interface SVGMaskElement</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-maskunits-userspaceonuse">
   <b><a href="#valdef-maskunits-userspaceonuse">#valdef-maskunits-userspaceonuse</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-maskunits-userspaceonuse">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-maskunits-objectboundingbox">
   <b><a href="#valdef-maskunits-objectboundingbox">#valdef-maskunits-objectboundingbox</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-maskunits-objectboundingbox">9.1. The mask element</a> <a href="#ref-for-valdef-maskunits-objectboundingbox①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-mask-maskcontentunits">
   <b><a href="#element-attrdef-mask-maskcontentunits">#element-attrdef-mask-maskcontentunits</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-mask-maskcontentunits">9.1. The mask element</a> <a href="#ref-for-element-attrdef-mask-maskcontentunits①">(2)</a>
    <li><a href="#ref-for-element-attrdef-mask-maskcontentunits②">Interface SVGMaskElement</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-maskcontentunits-userspaceonuse">
   <b><a href="#valdef-maskcontentunits-userspaceonuse">#valdef-maskcontentunits-userspaceonuse</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-maskcontentunits-userspaceonuse">9.1. The mask element</a> <a href="#ref-for-valdef-maskcontentunits-userspaceonuse①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-maskcontentunits-objectboundingbox">
   <b><a href="#valdef-maskcontentunits-objectboundingbox">#valdef-maskcontentunits-objectboundingbox</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-maskcontentunits-objectboundingbox">9.1. The mask element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-mask-x">
   <b><a href="#element-attrdef-mask-x">#element-attrdef-mask-x</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-mask-x">7.5. Masking Area: the mask-clip property</a>
    <li><a href="#ref-for-element-attrdef-mask-x①">9.1. The mask element</a> <a href="#ref-for-element-attrdef-mask-x②">(2)</a> <a href="#ref-for-element-attrdef-mask-x③">(3)</a> <a href="#ref-for-element-attrdef-mask-x④">(4)</a> <a href="#ref-for-element-attrdef-mask-x⑤">(5)</a> <a href="#ref-for-element-attrdef-mask-x⑥">(6)</a> <a href="#ref-for-element-attrdef-mask-x⑦">(7)</a> <a href="#ref-for-element-attrdef-mask-x⑧">(8)</a> <a href="#ref-for-element-attrdef-mask-x⑨">(9)</a>
    <li><a href="#ref-for-element-attrdef-mask-x①⓪">Interface SVGMaskElement</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-mask-y">
   <b><a href="#element-attrdef-mask-y">#element-attrdef-mask-y</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-mask-y">7.5. Masking Area: the mask-clip property</a>
    <li><a href="#ref-for-element-attrdef-mask-y①">9.1. The mask element</a> <a href="#ref-for-element-attrdef-mask-y②">(2)</a> <a href="#ref-for-element-attrdef-mask-y③">(3)</a> <a href="#ref-for-element-attrdef-mask-y④">(4)</a> <a href="#ref-for-element-attrdef-mask-y⑤">(5)</a> <a href="#ref-for-element-attrdef-mask-y⑥">(6)</a> <a href="#ref-for-element-attrdef-mask-y⑦">(7)</a> <a href="#ref-for-element-attrdef-mask-y⑧">(8)</a> <a href="#ref-for-element-attrdef-mask-y⑨">(9)</a>
    <li><a href="#ref-for-element-attrdef-mask-y①⓪">Interface SVGMaskElement</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-mask-width">
   <b><a href="#element-attrdef-mask-width">#element-attrdef-mask-width</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-mask-width">7.5. Masking Area: the mask-clip property</a>
    <li><a href="#ref-for-element-attrdef-mask-width①">9.1. The mask element</a> <a href="#ref-for-element-attrdef-mask-width②">(2)</a> <a href="#ref-for-element-attrdef-mask-width③">(3)</a> <a href="#ref-for-element-attrdef-mask-width④">(4)</a> <a href="#ref-for-element-attrdef-mask-width⑤">(5)</a> <a href="#ref-for-element-attrdef-mask-width⑥">(6)</a> <a href="#ref-for-element-attrdef-mask-width⑦">(7)</a> <a href="#ref-for-element-attrdef-mask-width⑧">(8)</a> <a href="#ref-for-element-attrdef-mask-width⑨">(9)</a>
    <li><a href="#ref-for-element-attrdef-mask-width①⓪">Interface SVGMaskElement</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-mask-height">
   <b><a href="#element-attrdef-mask-height">#element-attrdef-mask-height</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-mask-height">7.5. Masking Area: the mask-clip property</a>
    <li><a href="#ref-for-element-attrdef-mask-height①">9.1. The mask element</a> <a href="#ref-for-element-attrdef-mask-height②">(2)</a> <a href="#ref-for-element-attrdef-mask-height③">(3)</a> <a href="#ref-for-element-attrdef-mask-height④">(4)</a> <a href="#ref-for-element-attrdef-mask-height⑤">(5)</a> <a href="#ref-for-element-attrdef-mask-height⑥">(6)</a> <a href="#ref-for-element-attrdef-mask-height⑦">(7)</a> <a href="#ref-for-element-attrdef-mask-height⑧">(8)</a> <a href="#ref-for-element-attrdef-mask-height⑨">(9)</a>
    <li><a href="#ref-for-element-attrdef-mask-height①⓪">Interface SVGMaskElement</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-mask-type">
   <b><a href="#propdef-mask-type">#propdef-mask-type</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-mask-type">7.2. Mask Image Interpretation: the mask-mode property</a> <a href="#ref-for-propdef-mask-type①">(2)</a> <a href="#ref-for-propdef-mask-type②">(3)</a>
    <li><a href="#ref-for-propdef-mask-type③">8.2. Mask Border Image Interpretation: the mask-border-mode property</a>
    <li><a href="#ref-for-propdef-mask-type④">9.2. Mask Source Interpretation: the mask-type property</a> <a href="#ref-for-propdef-mask-type⑤">(2)</a> <a href="#ref-for-propdef-mask-type⑥">(3)</a> <a href="#ref-for-propdef-mask-type⑦">(4)</a> <a href="#ref-for-propdef-mask-type⑧">(5)</a>
    <li><a href="#ref-for-propdef-mask-type⑨">Changes since last publication</a> <a href="#ref-for-propdef-mask-type①⓪">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-mask-type-luminance">
   <b><a href="#valdef-mask-type-luminance">#valdef-mask-type-luminance</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-type-luminance">7.2. Mask Image Interpretation: the mask-mode property</a>
    <li><a href="#ref-for-valdef-mask-type-luminance①">9.2. Mask Source Interpretation: the mask-type property</a> <a href="#ref-for-valdef-mask-type-luminance②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-mask-type-alpha">
   <b><a href="#valdef-mask-type-alpha">#valdef-mask-type-alpha</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-mask-type-alpha">7.2. Mask Image Interpretation: the mask-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-clip">
   <b><a href="#propdef-clip">#propdef-clip</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-clip">5. Clipping Paths</a>
    <li><a href="#ref-for-propdef-clip①">6.1. The clipPath element</a>
    <li><a href="#ref-for-propdef-clip②">9.1. The mask element</a>
    <li><a href="#ref-for-propdef-clip③">Appendix A: The deprecated clip property</a> <a href="#ref-for-propdef-clip④">(2)</a> <a href="#ref-for-propdef-clip⑤">(3)</a> <a href="#ref-for-propdef-clip⑥">(4)</a> <a href="#ref-for-propdef-clip⑦">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-clip-rect">
   <b><a href="#funcdef-clip-rect">#funcdef-clip-rect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-clip-rect">Appendix A: The deprecated clip property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-clip-top">
   <b><a href="#typedef-clip-top">#typedef-clip-top</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-clip-top">Appendix A: The deprecated clip property</a> <a href="#ref-for-typedef-clip-top①">(2)</a> <a href="#ref-for-typedef-clip-top②">(3)</a> <a href="#ref-for-typedef-clip-top③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-clip-right">
   <b><a href="#typedef-clip-right">#typedef-clip-right</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-clip-right">Appendix A: The deprecated clip property</a> <a href="#ref-for-typedef-clip-right①">(2)</a> <a href="#ref-for-typedef-clip-right②">(3)</a> <a href="#ref-for-typedef-clip-right③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-clip-bottom">
   <b><a href="#typedef-clip-bottom">#typedef-clip-bottom</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-clip-bottom">Appendix A: The deprecated clip property</a> <a href="#ref-for-typedef-clip-bottom①">(2)</a> <a href="#ref-for-typedef-clip-bottom②">(3)</a> <a href="#ref-for-typedef-clip-bottom③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-clip-left">
   <b><a href="#typedef-clip-left">#typedef-clip-left</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-clip-left">Appendix A: The deprecated clip property</a> <a href="#ref-for-typedef-clip-left①">(2)</a> <a href="#ref-for-typedef-clip-left②">(3)</a> <a href="#ref-for-typedef-clip-left③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="stroke-bounding-box">
   <b><a href="#stroke-bounding-box">#stroke-bounding-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-stroke-bounding-box">5.1. Clipping Shape: the clip-path property</a>
    <li><a href="#ref-for-stroke-bounding-box①">7.5. Masking Area: the mask-clip property</a>
    <li><a href="#ref-for-stroke-bounding-box②">7.6. Positioning Area: the mask-origin property</a>
    <li><a href="#ref-for-stroke-bounding-box③">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="svgclippathelement">
   <b><a href="#svgclippathelement">#svgclippathelement</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-svgclippathelement">Interface SVGClipPathElement</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-svgclippathelement-clippathunits">
   <b><a href="#dom-svgclippathelement-clippathunits">#dom-svgclippathelement-clippathunits</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-svgclippathelement-clippathunits">Interface SVGClipPathElement</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-svgclippathelement-transform">
   <b><a href="#dom-svgclippathelement-transform">#dom-svgclippathelement-transform</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-svgclippathelement-transform">Interface SVGClipPathElement</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="svgmaskelement">
   <b><a href="#svgmaskelement">#svgmaskelement</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-svgmaskelement">Interface SVGMaskElement</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-svgmaskelement-maskunits">
   <b><a href="#dom-svgmaskelement-maskunits">#dom-svgmaskelement-maskunits</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-svgmaskelement-maskunits">Interface SVGMaskElement</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-svgmaskelement-maskcontentunits">
   <b><a href="#dom-svgmaskelement-maskcontentunits">#dom-svgmaskelement-maskcontentunits</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-svgmaskelement-maskcontentunits">Interface SVGMaskElement</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-svgmaskelement-x">
   <b><a href="#dom-svgmaskelement-x">#dom-svgmaskelement-x</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-svgmaskelement-x">Interface SVGMaskElement</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-svgmaskelement-y">
   <b><a href="#dom-svgmaskelement-y">#dom-svgmaskelement-y</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-svgmaskelement-y">Interface SVGMaskElement</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-svgmaskelement-width">
   <b><a href="#dom-svgmaskelement-width">#dom-svgmaskelement-width</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-svgmaskelement-width">Interface SVGMaskElement</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-svgmaskelement-height">
   <b><a href="#dom-svgmaskelement-height">#dom-svgmaskelement-height</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-svgmaskelement-height">Interface SVGMaskElement</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>